[React] Props
Props란?
React가 컴포넌트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다.
이 객체를 props 라고 한다.
- props 란?
- attribute 와 properties 차이
- props로 name, color 값 가져오기
- props 값을 구조분해할당으로 가져오기
- defaultProps
- children
- 조건부렌더링
props란?
React가 컴포넌트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다.
이 객체를 props(property)라고 한다.
* props는 객체의 형태로 parameter 를 가져온다.
attribute 와 propertices 의 차이
Attribute는 HTML문서에서 elements에 추가적인 정보를 넣을 때는 요소이고,
Propertices는 HTML DOM 안에서 attribute를 가리키는 표현이라고 한다.
props로 name, color 값 가져오기
App.js 파일에서 <Test /> 컴포넌트에 name, color 객체를 전달한다.
Test.js 컴포넌트에서 props 파라미터 값으로 객체화된 값을 가져온다.
* console.log로 props를 확인하면 {name: 'react', color: ' yellow'} 객체화된 값을 확인 할 수 있다.
* 값은 props 로 접근하여 확인한다.
* style을 작성할 때 이미 중괄호를 사용하는데, 값을 전달 받아야 되니깐 그 안의 중괄호를 한번 더 넣어준다.
props 값을 구조분해할당으로 가져오기
위의 name, color 값을 가져오는 예시에서 props로 접근해서 값을 찾아야 되는데,
구조분해할당을 이용하면 더 가독성이 좋게 작성할 수 있다.
구조 분해 할당이란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식.
defaultProps
props의 초기값을 지정해준다.
<Test /> 컴포넌트에 name 속성값이 없을 때 defaultProps에 미리 지정한 값이 들어온다.
children
다른 컴포넌트가 넘겨준 props를 { children } 으로 사용할 수 있다.
Wrapper.js 컴포넌트에서 Test.js 컴포넌트의 props를 {children} 으로 받아서 사용할 수 있다.
Wrapper.js 컴포넌트에서 children 파라미터로 값을 가져오지 않으면
App.js 에서 <Wrapper /> 컴포넌트 안에 있는 <Test /> 컴포넌트의 props를 가져올 수가 없어
<Wrapper /> 컴포넌트만 화면에 그려지게 된다.
조건부렌더링
조건이 참인지 거짓인지 렌더링한다.
조건부렌더링은 필요에 따라 삼항연산자, 논리연산자를 통해 사용할 수 있다.
삼항연산자는 대게 A와 B의 값이 다를 때 사용하고,
논리연산자의 경우엔 값을 보여주고, 숨길 때 사용하는 편이다.
조건부렌더링을 통해서 props의 값을 출력할 수 있다.
isSpecial의 값이 true 일때 element가 화면에 보여지는 코드이다.
isSpecial={true} 로도 표현할 수 있고, React 에서는 true 없이 작성 할 수도 있다.