[React] - Props
Props를 통해 컴포넌트에게 값 전달하기
- Props는 Properties의 줄임말입니다.
- 우리가 어떠한 값을 컴포넌트에 전달해줘야 할 때, props를 사용합니다.
Props의 기본 사용법
App 컴포넌트에서 Hello 컴포넌트를 사용할 떄 name이라는 값을 전달해주고 싶다고 가정하면 이렇게 코드를 작성하면 됩니다.
이제 Hello 컴포넌트에서 name값을 사용 하고싶을 때,
위 코드와 같이 작성을 하고, Hello.js를
위 코드와 같이 작성합니다.
컴포넌트에게 전달되는 props는 파라미터를 통
하여 조회할 수 있습니다. props는 객체 형태로 전달되며,
만약 name 값을 조회하고 싶다면 props.name을 조회하면 됩니다.
여러개의 props, 비구조화 할당
Hello 컴포넌트에 또 다른 props를 전달해봅시다. color라는 값을 설정해 보겠습니다.
Hello 컴포넌트에서 color 값을 조회해서 폰트의 색상으로 설정해 보겠습니다.
또는 props 내부의 값을 조회할 때마다 props. 를 입력하고 있습니다.
함수의 파라미터에서 비구조화 할당(혹은 구조 분해라고도 불립니다.) 문법을 사용하면 조금 더 코드를 간결하게 작성할 수 있습니다.
결과는 같지만 코드가 간결해진 것을 볼 수 있습니다.
defaultProps로 기본값 설정
컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps라는 값을 설정하면 됩니다.
App.js에서 name이 없는 Hello 컴포넌트를 렌더링 해보겠습니다.
두개 이상의 태그를 사용하기 때문에 <></> Fragment태그로 감싸주었습니다.
Props.children
컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children을 조회하면 됩니다.
이번에, props.children을 사용하는 새로운 컴포넌트를 만들어 보겠습니다.
Wrapper.js를 src 디렉터리에 만들겠습니다.
이렇게 Wrapper 태그 내부에 Hello 컴포넌트 두개를 넣었습니다.
브라우저를 확인하면 Hello 컴포넌트들은 보여지지 않을 것입니다.
내부의 내용이 보여지게 하기 위해서는 Wrapper에서 props.children을 렌더링 해주어야 합니다.
