(5) React - Props 사용하기

단순히 국기 과정에서 수업받은 내용을 토대로 작성하였습니다.

태클은 언제나 환영합니다.

실력이 미숙한 관계로 사용하는 언어나 표현능력이 부족한 점 인지해주시길 바랍니다..

이전 글과 이어서 진행됩니다.

 

1.

각 컴포넌트에는 props를 인자로 줄 수 있습니다.

props를 인자로 주게 될 경우 이 컴포넌트에 적용되어있는 속성을 전부 알 수 있습니다.

현재 App.js에는 함수형 컴포넌트인 Hello에 어떠한 속성도 주지 않았습니다.

2. 현재 "props"라는 문자열을 붙여서 나타냈기 때문에 Object 타입으로 나타나고 있으며

 console.log(props)로 타이핑했을 경우 undefined가 나타나는 것을 알 수 있을 것입니다.

3.  그럼 이제는 직접 속성을 부여해서 props를 인자로 받았을 경우 어떻게 나타나는지 알아보겠습니다.

 아래와 같이 console.log에 props가 나타나도록 설정합니다.

그리고 람다식을 사용해서 click 변수를 function의 기능을 하도록 선언하고,

Hello컴포넌트에 name과 fn 속성을 부여합니다.

그에 대한 결과로 콘솔에 찍힌 결괏값이 나타나는 것을 보실 수 있습니다.

props만 나오게 해 뒀지만 Hello컴포넌트가 가지고 있는 모든 속성이 나타나는 것을 알 수 있다.

4. 여기가 중요합니다. 

props로 받았던 인자에 대한 각각의 속성들을 보여줄 수 있는데 이것을 "구조 분해 할당"이라고 합니다.

현재 return값의 의미는 이렇게 해석이 됩니다.

=> div태그에는 style을 적용시키고, "Hello, World"를 클릭할 때 fn속성에 넘겨준 function의 결괏값을

 나타나게 한다.

 

5. 4번에서의 그림과 함께 설정한 것에 대한 결괏값이 콘솔에 나타납니다.

name과 fn을 console.log로 찍힌 것이 확인이 되며

Hello, World를 클릭했을 때 나타나는 "click"이 콘솔에 나타나는 것을 보실 수 있습니다.

 

 

6.  구조 분해 할당의 또 다른 적용방법입니다,

  16번째 라인에 p태그로 {name}을 선언시켜두었습니다.

 이 경우 화면상에서는 Hello컴포넌트의 name속성에 넘겨준 값을 나타나게 할 수 있습니다.

{name}의 결괏값은 이 컴포넌트의 name속성에 어떤 값을 넘겨주냐에 따라 다르게 나타납니다.

name속성에 "Hong"을 넘겨준 결과 화면상에서 "Hong"이라는 문자가 나타나는 것을 볼 수 있습니다.