React 실습 -2

제가 하면 여러분도 하실 수 있습니다!! 진짜에요..

파일간의 혼란을 피하기 위해 potato 파일을 지워보자!

potato를 지워보자

 

결과를 예상해봅시다!

당연히 오류!

potato 파일에 있던 컴포넌트가 사라졌거든!

 

그럼 컴포넌트를 생성하면 될까?

potato 컴포넌트

결과는 ??

아싸 나온다리!!!!!

 

자 이제 컴포넌트는 이해한것 같고!

진도를 나가보자!!

 

JSX에서 두번째로 이해해야 할 것은 이 컴포넌트에 정보를 보낼 수 있다는 점!!!!!

 

React가 멋진 이유는 재사용 가능한 컴포넌트를 만들 수 있다는 점!!

이 말은 컴포넌트를 반복 사용 가능하다는 말!!

 

예를 들자면, 영화목록이 있다고 생각해보자

영화 목록이 여러개 있다면, 하나하나를 수동으로 만들어야하지!

하지만 컴포넌트를 사용한다면 하나의 컴포넌트만 생성하고 나머지는 부르기만 하면 끝!

 

대박대박대박대박대박대박대박대박대박대!!

 

그렇다면 컴포넌트를 영화 목록만큼 불러온다? 그것도 아니지

왜냐하면 수동으로 하고 싶지 않거든

자동적으로 동적으로!! 아 원츄!!!

 

자 이제 컴포넌트에 컴포넌트로 children component로 정보를 보내는 방법을 배워보자!

HTML과 매우 비슷!

이것이 바로 food 컴포넌트에 정보를 보내는 방법!

 

저장했는데 결과가 똑같다구요? refresh를 했을 때 변화가 없는게 정상이쥬

정보를 보냈지만 정보를 사용하지는 않았기 때문!! (class선언을 하고 css를 주지 않은것과 같은 느낌?)

 

그럼 이 name(props라고 함)을 어떻게 사용할까?

그것이 바로 리액트가 해줄 일!

 

예를 들어서,  

 

위 이미지 같이 props를 사용!!

원하는건 뭐든지 할 수 있고, father component에서 children component로 원하는 많은 props를 보낼 수 있어!!

 

누군가가 Food component로 정보를 보내려고 한다면 React가 이 모든 속성을 가져올거야

그리고 Food function component의 argument(인자)로 그것들을 넣을거야!

 

믿지 못하겠다고 ? 바로 고!

 

수정 후 콘솔로그를 확인해보면!!

 

오브젝트가 잡히고 이 오브젝트는 컴포넌트로 전달 된 모든 props들!!

 

props라고 불리는 한 argument의 내부야, 얼마나 멋져! 그리고 이게 바로 React다!! (음...)

이러한 점들이 바로 React를 사용하기 위해 create-react-app이 필요한 이유다!!(음...)

 

※ 참고!!

function Food(props) {}

function Food({name})

function Food({something})

function Food({papapa})

위 네가지는 동일!

{}를 쓴다면 내부에서 얻을 수 있음!

 

그리고 내가 원하는 Potato부분을 {name}으로 변경 후

런 한다면 ?

올 신기방기 (나이스해보이고 싶으면 이렇게 써라~)

 

그렇다면!!

이제 한개의 컴포넌트로 여러 다른 값을 불러 올 수 있지!! 해보자고!!

이렇게 입력하고! 런한다면?

오마갓!!

이제 우리는 동적데이터가 있는 컴포넌트가 있고, JSX와 props의 힘으로 모든 컴포넌트롤 재사용 할 수 있어~~

 

※ 조심해야 할 점!

컴포넌트는 항상 대문자로 시작!!

 

여기서 father가 children한테 data를 어떻게 보낼까??

app이 어떻게 food에게 props를 사용해서 data를 보낼까 ?

 

props란 뭐든지 component에 넣게 되는 것들! 이게 props다!

 

props는 어디로 갈까? food의 첫번째 argument로 가지요~

 

2번째 끝~!!!

 

쉽다쉬워홓헤허헿

 

참조: nomadcoders.co/