[React] children, 비구조화 할당 문법 props값 추출

1. children

 

 

컴포넌트의 태그값 사이의 값을 보여주는 props라고 생각하면 될것 같다. 

 

예시를 통해서 알아보겠습니다. 

 

children값 입력

 

children 값은 언급한것 처럼 return 되어지는 Component1 태그의 사이 값을 나타내 줄 수 있는 props이다.

 

 

'고구마'라는 값을 보여주기 위해서는 Component1.js의 값을 다음과 같이 수정해주면 된다.

 

 

 

 호출하고자 할때는 위의 예시와 같이 props.children을 입력을 해주어야 props에서 태그값으로 지정한 '고구마' 값을 받아 올 수 있다. 

 

결과 화면을 보도록 하겠습니다.

 

 

 

 

2. 비구조화 할당 문법 props값 추출

 

 

위의 예시들을 보다보면 props의 값을 조회 할 때 마다 props.name 등과 같이 앞에 props를 직접 입력 해주어야 하며 약간의 불편함을

 

초래 합니다. 이런 불편함을 해소하기 위해 ES6의 문법을 통해 값을 출력하는 방법을 예시로 들어 보겠습니다. 

 

 

비구조할당 문법 사용

위의 예시를 보면 const {name, children} = props; 를 통해 객체에서 값을 추출하고 이를 비구조 할당이라고 합니다.

 

div에 보시면 props.name이 => name으로 바뀐것을 볼 수 있죠? children 도 마찬가지구요. 

 

 

 

 

또한 다른방법으로는 props에 파라미터 객체값을 바로 입력하는 방법도 있습니다. 

 

 

 

 

예시를 보겠습니다 Component1 = (props)의 자리를 => Component1 =({children, name}) 변경을 통해 파라메터 값을 바로 사용 할

수 있고  '함수형 컴포넌트' 에서 자주 사용하고 있습니다. 

 

 

children 및 비구조화 할당 관련된 더 자세한 내용은

 

 

https://ko.reactjs.org/docs/react-api.html 

 

에서 확인해보시면 될 것같습니다

 

그럼 이만!