[React JS][니코 코딩] Props

4.0 Props

• 무엇이 컴포넌트가 돼야 하는지, header가 컴포넌트가 되어야 하는지 알게 될거다.
• footer가 컴포넌트가 되어야 하는지, notificaion bar가 컴포넌트가 되어야 하는지
• 이 각각의 로직들을 각각의 조각들로 분리시켜서, 다른 자식 컴포넌트를 Rendering 하는 큰 부모 컴포넌트를 가질 수 있다.

Props는 일종의 방식이다. 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법

• 우리가 할 것은, 한 예시를 만들거다.
  • 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보내는 거다.

Props를 이해하기 위해서, 그리고 진정으로 이게 왜 필요한지를 보기 위해 Props로 해결이 가능하게 될 문제들을 일단 먼저 겪어봐야 한다.

• 가정(우리가 회사에서 어플리케이션을 만들고 있다)
  • 이 어플리케이션은 버튼을 갖고 있다. 꽤 많은 다양한 버튼들( 변경사항 저장 버튼이라 든가, 취소 버튼이라 든가, 로그인 버튼)
• 우리는 어떻게 리액트 컴포넌트를 재사용할 수 있게 만드는지 모른다.
  • 우리가 아는 방법으로 해볼 거다. 각각 버튼마다 컴포넌트를 만드는 거다.
  • function(함수)를 만들어 볼거다. SaveBtn이라는 새로운 컴포넌트를 만들자
• component(컴포넌트)라고 하는건, 보고 있는 대로 단지 function(함수)일 뿐이다.
  • 컴포넌트는 단지 함수다 . 어떤 JSX를 반환하는

    

• 우리가 하고 있는 것은 단지 이 함수들을 불러내는 거다.
• 이게 함수를 부르는 방식이다.

  

• 이게 (함수형) 컴포넌트이다.

  

• 이건 JSX의 내부라고 부르는 거다.
• 문제 ( 디자인 구림)
  • 스타일을 넣어줘야 겠져?
  • button의 style property(속성)을 사용
  • React JS에서 style 바꾸는 방법
    • CSS 사용하는 방법, 여러 라이브러리들을 사용 기본적으로 할 수 있는 방법 button Tag(태그) 내의 style을 변경하는 거다.

      

• 이렇게 하는 거는 Best가 아니다. 코드가 너무 길다.
• style을 그저 복붙하는 것 대신에, 보다 좀 더 설정이 가능한 컴포넌트
  • text 만 다름
  • 이런 style들을 모두 갖는 단 한 가지의 컴포넌트만 만들 수 있다면 얼마나 좋을까?
• 우리가 해야할 일은 우리들의 컴포넌트들을 좀 더 설정 가능하게끔 만드는 것이다.
  • text를 설정할 수 있게 하는 거다.
  • HTML에서 input을 어떻게 설정했지?

    

  • button을 설정(JSX) 이게 EventListener를 붙여주는 방법이다.

    

  • 아무것도 작동안함
  • banana에 Btn을 보냈는데, 이 Btn은 banana를 사용하지 않아서 그렇다.

    

  • 배워볼 건, 네가 만들고 사용하는 모든 컴포넌트들은 “()” 괄호로 argument(인자)를 받는다는 거다. 리액트가 넣어주는 거지
  • 첫번째 argument의 이름은 마음대로 지어줄 수 있다.
    • 이 인자 이름을 props라고 부르고 Btn으로부터 전달 받는properties 인거다.

      

  • 똑같은 의미다. Btn()함수를 불러서 banana라는 인자를 이런식으로 보내는 것과 같다.
  • 그래서 어떤 prop이든 네가 Btn 컴포넌트에 보내면 그것들은 Btn 함수의 첫 번째 argument(인자) 속으로 들어갈 것이다.
  • 우리는 두 개의 console.log를 볼 수 있다. 왜냐하면 Btn을 “두 번” rendering을 했기 때문
  • props는 첫 번째이자 유일한 인자다. 이 Btn이 전달 받는 유일한 인자.
  • Props는 오브젝트이다. 우리가 이쪽에서 보낸 모든 것들을 갖는 오브젝트

    

  • 첫 번째 Btn의 props는 이렇게 우리가 넣은 모든 것을 갖는 오브젝트가 됐다.

    

  • UI 는 다르게 된다.

    

  • style 안에서 if else를 사용할 수 있다 . props 기반으로
• <총정리 해석>

  

• ReactDOM을 render 한다 App컴포넌트를 루트로
  • APP컴포넌트 실행 하는데 Btn 컴포넌트가 두개 있다. 하나는 text가 "Save Changes"이고 big이라는 속성은 true이고 하나는 text 가 "Continue"고 big이라는 속성은 false이다.
  • style은 backgroundColor가 "tomato" 이고 등등 있는데 big 의 속성에 따라 fontSize가 달라진다.

 

4.1 Memo

• Btn들에 onClick function을 달아주고 싶다.
• onClick function은 내 App 컴포넌트에 있는 뭔가의 state를 바꾸게 될거다.

  

• 보내는 string을 다른 걸로 바꿨을 뿐이다.

  

• 만약 onClick을 여기 내 커스텀 컴포넌트에다가 넣는다면 이건 이벤트리스너가 아니다.
• 실질적으로 React가 절대 이벤트리스너를 추가시키는게 아니다.
• 이건 단지 prop의 이름일 뿐이다

  

• 이 상황에서 style은 결코 직접적으로 button에 달리지 않는다.
• prop들을 가져와서 적용 시켜야 한다. 위에 function에서

  

• 두번째 놈 Continue 놈은 다시 그릴 필요가 없다.(컴포넌트)
• React Memo(memorize 기억)하는 것처럼 리액트에게 말해줄 수 있다.
• 첫 번째 버튼의 props는 바뀔거다.
  • 왜냐하면 첫 번째 버튼의 props는 state와 연결되어 있기 때문이다

    

• 이런 feature가 리액트에 존재한다는 걸 보여준다.(기억할 필요X)
• MemorizedBtn은 바로 memorized version의 Btn이 될 거다.
• Save Changes를 누르면, changeValue 함수가 실행될 거고,
• changeValue는 state를 바꿀거고, 그건 re-render를 발생 시켜야만 한다.
• 보너스 같은거 우리의 컴포넌트들이 다시 그려질 때 우리가 컨트롤할 수 있다.
• props가 변경되지 않는다면 다시 그릴 필요가 없다

  

 

 

4.2 Prop Types

• 어떤 prop이든 보낼수 있게 해준다. 우리가 하고 있는 뭐든 가능하게 해준다.
• 컴포넌트의 환경을 우리가 원하는 만큼 설정할 수가 있기 때문이다.
• text를 보낼 수 있고, boolean타입도 보낼 수 있다.
• Btn에 한 가지 더 configuration(설정)을 해보자
  • user(사용자)가 prop으로 fontSize를 전달할 수 있도록 해보자
• 우리는 text가 string이 되길 원하고 fontSize는 number가 되길 원한다
• 리액트팀으로부터 나온 PropTypes라는 한 패키지가 있다.
  • PropType은 내가 어떤 타입의 prop을 받고 있는지를 체크해준다.
• props의 타입이 뭐고 어떤 모양이어야 하는지 우리가 설명해줄 수 있다.

살짝 이해안됌

4.3 Recap

4.2 4.3 다시보기