[React][Codestates] React State & Props , props.children

React State & Props

Achievement Goals

• state, props의 개념에 대해서 이해하고, 실제 프로젝트에 적용할 수 있다.
• React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 State를 정의 및 변경할 수 있다.
• React 컴포넌트 (React Component)에 props를 전달할 수 있다.
• 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
• 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
• React의 단방향 데이터 흐름(One-way flow)에 대해 자신의 언어로 설명할 수 있다.

State & props Intro

State

• React에서 State는 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값

Props vs State

• props는 위로부터 전달받은 값
• state 는 내부에서 변화하는 값

Props 또는 State에 적합한 것은?

실제 생활에서 pops와 state를 나눈다면?

• 이름 : props - 변하지 않음 (개명 안 한다 가정)
• 성별 : props - 변하지않음 (성전환 안한다 가정)
• 나이 : state - 1년마다 변함
• 현재 사는 곳 : state - 이사할 때마다 변함
• 취업 여부 : state - 취업 퇴사 ㅎ
• 결혼/연래 여부 : state - 결혼 이혼 등 변함
• UI component에서 props와 state를 나눈다면?
• Toggle Switch
  • State : On / OFF 여부 --> code로 { isOn : true} , {isOn : false} state가 변한다
  • Counter
    • State : 현재 숫자 값 --> code로 {count : 0} , {count : 3} { count : 6} 등 state가 변한다

Props

props의 특징

[20100809]- React-Components and Props 공식문서를 통해 조금 정리를 해보았으니 참고해보자!

• props는 컴포넌트의 속서(property)를 의미한다. 외부로부터 전달받은 값이며, 변하지 않는다
• props는 부모 컴포넌트로부터 전달받은 값이며, 마치 함수의 전달 인자(argumrnt)처럼 전달받아서 React 엘리먼트를 반환한다.
  그렇기 때문에 컴포넌트가 최초 렌더링 될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.
• props는 객체 타입이기 때문에 어떠한 타입의 값도 전달이 가능하다.
• props는 Read Only 이기 때문에 자식 컴포넌트에서 함부로 변경할 수 없다. 이는 개발자가 의도하지 않은 Side effect를 방지하고 데이터 흐름 원칙 (React is all about one-way date flow down the component hierarchy)에 위배되기 때문이다. 이러한 방식을 단방향, 하향식 데이터 흐름이라고 한다. props를 사용하는 방법 3단계로

How to use props

props를 사용하는 방법을 5단계로 나눠보았다.

1. 사용할 상위 컴포넌트와 하위 컴포넌트를 선언한다.
2. 상위 컴포넌트 안에 하위 컴포넌트를 작성한다.
3. 상위 컴포넌트에서 하위 컴포넌트로 전달하고자 하는 값과 속성을 정의한다.
4. props를 이용하여 상위 컴포넌트에서 정의한 값과 속성을 전달한다.
5. 전달받은 props를 사용 또는 렌더링 한다.

코드를 보면서 위의 세 단계를 적용해보자.

1. 사용할 상위 컴포넌트와 하위 컴포넌트를 선언한다.
2. 상위 컴포넌트 안에 하위 컴포넌트를 작성한다.

 {/* Parent Component*/}
function Parent(){
  return(
    <div className="parent">
      <h1>I am the parent component</h1>
      <div>I want to transfer my state to my child
        <Child />
        <Child />
      </div>
    </div>
  )
  }


{/* Child Component */}
function Child(){

    console.log("props:",props);
    return (
      <div className="child">
        <p>여기에 props를 넣을 것임</p>
        <p>여기에도 props를 넣을 것임</p>
      </div>
    )
  }  

위의 코드에서와 같이 (1) 먼저 각 컴포넌트를 선언하고 (2) Child 컴포넌트를 상위 컴포넌트 (Parent)에 작성한다.

3. 상위 컴포넌트에서 하위 컴포넌트로 전달하고자 하는 값과 속성을 정의한다.

  {/* Parent Component*/}
function Parent(){

  const text2="I wanna sleep now";

  return(
    <div className="parent">
      <h1>I am the parent component</h1>
      <div>I want to transfer my state to my child
        <Child text={"i'm the eldest child"} />
        <Child text={text2} />
      </div>
    </div>
  )
  }

HTML에서 속성과 값을 할당하는 방법은 아래와 같다.

  <a href="https://github.com/sora9z"> Click me to visit Sora's git hub repo</a>

React에서도 이와 동일하다

위의 Parent 코드처럼 "text"라는 속성을 선언하고, 이 속성에 "i'm the eldest child"라는 문자열을 { } 안에 할당하여 Child 컴포넌트에 전달할 수 있다. 또는 상위 컴포넌트에 번수를 선언하여 하위 컴포넌트 속성 값으로 { } 안에 변수를 넣는 방법도 있다.

4. props를 이용하여 상위 컴포넌트에서 정의한 값과 속성을 전달한다.

function Child(props){ 
  <div className="child"> 
    <p>{props.text}</p> 
  </div> 
}

이제 상위 컴포넌트에서 전달한 속성 값을 하위 컴포넌트에서 받아보겠다.

함수에 인자를 전달하듯 React component에 props를 전달하면 , props가 필요한 모든 데이터를 가져오게 된다.

5. 전달받은 props를 사용 또는 렌더링 한다.

props는 위에서 말했듯이 객체이고, key : value는 Parent에서 정의한 {text : text2}의 형태이다. 따라서 dot notation을 중괄호 안에 넣어 사용하면 된다.

  function Child(props){

    console.log("props:",props);
    return (
      <div className="child">
        <p>{props.text}</p>
      </div>
    )
  }

npm run start로 결과를 확인하면 아래와 같다.

props.children

props를 전달하는 방법 중 또 한 가지는 props.children을 사용하여 태그와 태그 사이에 value를 넣어 전달할 수 있다.

function Parent(){


  return(
    <div className="parent">
      <h1>I am the parent component</h1>
      <div>       
        <Child> I'm the older child </Child>
      </div>
    </div>
  )
  }

function Child(props){

    console.log("props:",props);
    return (
      <div className="child">
          <p>{props.children}</p>
      </div>
    )
  }

위와 같이 Child 태그 사이의 값을 props.children을 사용하여 사용하 수 있다.

공식문서를 참고하여 더 공부해보자!

https://reactjs.org/docs/composition-vs-inheritance.html

[

Composition vs Inheritance – React

A JavaScript library for building user interfaces

reactjs.org

](https://reactjs.org/docs/composition-vs-inheritance.html)