[React] 3. props를 통해 컴포넌트에 값 전달하기

잘못 된 내용에 대한 지적은 언제든 환영입니다.

props 기본 개념

function App() {
  return <Hello name="uncyclocity" />
}
export default App;

function Hello(props) {
  // 출력 : 저의 이름은 uncyclocity 입니다.
  return <div>저의 이름은 {props.name} 입니다.</div>;
}
export default Hello;

• props를 통해 외부의 값을 함수형 컴포넌트에서 받을 수 있다.
• props로 넘긴 값은 넘겨받은 컴포넌트의 props 객체에 전달된다.
• 함수형 컴포넌트의 defaultProps 객체에 props의 기본 값을 명시할 수 있다.
  👉 props로 받는 값이 없을 경우 해당 기본값이 적용된다.

   function App() {
     return <Hello /> //props.name에 아무 것도 넘겨주지 않았다.
   }
     
   export default App;

   function Hello(props) {
     // 출력 : 저의 이름은 unknown 입니다.
     return <div>저의 이름은 {props.name} 입니다.</div>;
   }

   Hello.defaultProps = {
     name: "unknown",
   };

   export default Hello;

비구조화 할당 문법 응용

• 객체 비구조화 할당을 이용하여 props 객체의 각 key 값들을 각각의 변수에 할당할 수 있다.

   function Hello({ name }) {
     return <div>저의 이름은 {name} 입니다.</div>;
   }

   export default Hello;

• rest 연산자 활용하기

  Q. rest가 뭔가요?
  A. 비구조화 할당에서 별도로 명시하지 않은 나머지 요소들을 하나의 배열에 넣는 연산자이다.
  (꼭 배열 이름이 rest일 필요는 없다.)
  ⚠ 주의 : 같은 3점 연산자인 spread와 햇갈릴 수 있으나, 역할은 전혀 다르다.

  const arr = [1, 2, 3, 4];
  const [one, two, ...rest];
  console.log(rest); // 콘솔 출력 결과: [3, 4]

   function App() {
     return <Hello name="인사받기" onClick={() => console.log("ㅎㅇ")}/> 
   }
   
   export default App;

   function Hello({name, ...rest}) {
     /* onClick 속성이 rest에 들어있으며, 이를 button 태그의 속성으로 등록함
     ➡ 버튼을 클릭하면 "ㅎㅇ"가 콘솔에 출력된다. */
     return <button {...rest}>{name}</button>;
   }

   export default App;

자식 요소 전달받기

컴포넌트의 자식 요소는 props.children에 저장이 된다.

예시) 두개의 자식 요소를 양옆으로 고정하는 컴포넌트 Between

Between.js

function Between({ children }) {
  const style = {
    display: "flex",
    justifyContent: "space-between",
  };

  return <div style={style}>{children}</div>;
}

export default Between;

App.js

import Between from "./components/Between";

function App() {
  /* Between의 자식요소로 p 태그 두개를 넣어주었으며,
  이는 props.children에 들어간다.*/
  return (
    <Between>
      <p>왼쪽</p>
      <p>오른쪽</p>
    </Between>
  );
}

export default App;

References

"5. props 를 통해 컴포넌트에게 값 전달하기" .velopert