[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를 가리키는 표현이라고 한다.

참고 

https://medium.com/hexlant/attribute-%EC%99%80-property-%EC%9D%98-%EC%B0%A8%EC%9D%B4-c6f1c91ba91

 

props로 name, color 값 가져오기

App.js 파일에서 <Test /> 컴포넌트에 name, color 객체를 전달한다.

Test.js 컴포넌트에서 props 파라미터 값으로 객체화된 값을 가져온다. 

Test.js

App.js

* console.log로 props를 확인하면 {name: 'react', color: ' yellow'} 객체화된 값을 확인 할 수 있다.

* 값은 props 로 접근하여 확인한다.

* style을 작성할 때 이미 중괄호를 사용하는데, 값을 전달 받아야 되니깐 그 안의 중괄호를 한번 더 넣어준다. 

 

props 값을 구조분해할당으로 가져오기

위의 name, color 값을 가져오는 예시에서 props로 접근해서 값을 찾아야 되는데,

구조분해할당을 이용하면 더 가독성이 좋게 작성할 수 있다. 

구조 분해 할당이란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식.

 

defaultProps 

props의 초기값을 지정해준다. 

 

App.js

<Test /> 컴포넌트에 name 속성값이 없을 때 defaultProps에 미리 지정한 값이 들어온다. 

Test.js

children 

다른 컴포넌트가 넘겨준 props를 { children } 으로 사용할 수 있다.

App.js

Wrapper.js 컴포넌트에서 Test.js 컴포넌트의 props를 {children} 으로 받아서 사용할 수 있다.

Wrapper.js

Wrapper.js 컴포넌트에서 children 파라미터로 값을 가져오지 않으면

App.js 에서 <Wrapper /> 컴포넌트 안에 있는 <Test /> 컴포넌트의 props를 가져올 수가 없어 

<Wrapper /> 컴포넌트만 화면에 그려지게 된다. 

---

조건부렌더링

조건이 참인지 거짓인지 렌더링한다.

조건부렌더링은 필요에 따라 삼항연산자, 논리연산자를 통해 사용할 수 있다. 

삼항연산자는 대게 A와 B의 값이 다를 때 사용하고, 

논리연산자의 경우엔 값을 보여주고, 숨길 때 사용하는 편이다. 

Test.js

조건부렌더링을 통해서 props의 값을 출력할 수 있다.

isSpecial의 값이 true 일때 element가 화면에 보여지는 코드이다.

App.js

isSpecial={true} 로도 표현할 수 있고, React 에서는 true 없이 작성 할 수도 있다.