React.js - props

부모와 자식 컴포넌트 사이에 데이터를 주고 받기 위해 props를 사용한다.

• 컴포넌트란?

컴포넌트란, 기능별로 부분부분 잘게 나눠놓은 조각을 뜻한다. 

리액트는 컴포넌트 기반의 라이브러리다. 하나의 프로젝트를 구성할 때, 여러개의 컴포넌트들로 화면을 구성한다.

로그인화면을 구성할 때, 아이디 입력칸, 비밀번호 입력칸, 로그인 버튼, 회원가입 버튼 등의 요소가 필요하다. 이러한 각각의 요소가 컴포넌트로써, 여러개의 컴포넌트를 결합하여 하나의 화면을 구성한다.

 

 

구성방법

 

• 아이디, 비밀번호 입력칸

const AuthBlock = () => (
  return (
    <div>
      <input type="text" name="id" value="" placeholder="아이디" />
      <input type="password" name="password" value="" placeholder="비밀번호" />
    </ div>
  );
);

export default AuthBlock;

 

• 로그인버튼

const AuthButton = () => {
  return (
    <>
      <input type="button" value="로그인 버튼" />
    </>
  );
};

export default AuthButton;

 

아이디, 비밀번호 입력 컴포넌트와 로그인버튼 컴포넌트로 나눠보았다.

 

• 컴포넌트 결합

import AuthBlock from './AuthBlock';
import AuthButton from './AuthButton';

const AuthForm = () => {
  return (
    <>
      <AuthBlock />
      <AuthButton />
    </>
  );
};

export default AuthForm;

import 구문을 통해 두개의 컴포넌트를 가져와 하나의 화면으로 구성하였다.

AuthForm이 부모 컴포넌트가 LoginBlock과 AuthButton은 자식 컴포넌트가 된다. 부모 컴포넌트와 자식 컴포넌트 사이에 데이터들을 주고 받기 위해 사용하는 것이 props이다.

 

 

• 부모 컴포넌트

  import AuthBlock from './AuthBlock';
  import AuthButton from './AuthButton';
  
  const AuthForm = () => {
    const { number } = 3;
    const onClick = () => {
      console.log("로그인 버튼 클릭!");
    }
    return (
      <>
        <AuthBlock number={ number } />
        <AuthButton onClick={ onClick } />
      </>
    );
  };
  
  export default AuthForm;

number라는 변수에 할당된 값인 3을 AuthBlock 컴포넌트로 넘겨준다.

AuthButton컴포넌트에서 버튼을 클릭했을 시, 발생하는 이벤트를 정의해준다.

 

• 자식 컴포넌트
  • AuthBlock

    const AuthBlock = (props) => (
      return (
        <div>
          <input type="text" name="id" value={ props.number } placeholder="아이디" />
          <input type="password" name="password" value="" placeholder="비밀번호" />
        </ div>
      );
    );
    
    export default AuthBlock;

  • AuthButton

    const AuthButton = (props) => {
      return (
        <>
          <input type="button" value="로그인 버튼" onClick={ props.onClick } />
        </>
      );
    };
    
    export default AuthButton;

     

부모 컴포넌트에 선언된 변수값과 클릭 이벤트가 자식 컴포넌트에 할당되었다. (부모 -> 자식)

 

 

props를 활용하는 다른 방법도 있다. props라는 단어를 사용하지 않고 부모 컴포넌트로 부터 받아오는 변수와 함수들을 나열하는 식으로 props를 활용할 수 있다.

• AuthBlock

  const AuthBlock = ({ number }) => (
    return (
      <div>
        <input type="text" name="id" value={ number } placeholder="아이디" />
        <input type="password" name="password" value="" placeholder="비밀번호" />
      </ div>
    );
  );
  
  export default AuthBlock;​

• AuthButton

  const AuthButton = ({ onClick }) => {
    return (
      <>
        <input type="button" value="로그인 버튼" onClick={ onClick } />
      </>
    );
  };
  
  export default AuthButton;​