Props와 State

Min·2021년 1월 4일

REACT

목록 보기

4/18

Props와 State

Props

Props는 개발에서 많이들 사용되는 용어인 프로퍼티(properties)의 줄임말이다.
props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용된다.
parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용된다.

Props는 React에서는 사용자가 컴포넌트에 전달해서 보관하길 원하는 데이터이다.
즉, 컴포넌트 내에서 데이터가 보관되면, 이 데이터는 수정되지 않고 보존되어야 하는 법칙이 성립된다. 만약 props의 값을 변경하고자 할 때에는 컴포넌트 내부가 아닌, 부모 컴포넌트에서 이에 대한 부분이 변경되어야 한다.

부모 객체에서는 자식객체에 post라는 데이터를 props 형태로 전달 해 줄수 있다.
이는 부모 객체에서 넘겨주는 데이터이기 때문에, 실제 사용하는 컴포넌트 내에서 props의 변경은 원칙적으로 금지되어 있다.

Props

부모 component에서 자식 component로 값을 전달할 때

// App.js
import React from 'react'
import Hello from './Hello'

function App() {
  return (
    <>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </>
  )
}

export default App;

// Hello.js
import React from 'react'

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello

props.children

component tag 사이에 넣은 값을 조회하고 싶을 때 사용

// App.js
import React from 'react'
import Hello from './Hello'
import Wrapper from './Wrapper'

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>

	// Wrapper사이의 Hello 값이 보고싶을 때

    </Wrapper>
  )
}

export default App

// Wrapper.js
import React from 'react'

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  }
  return (
    <div style={style}>
      {children}
	
	// {children} 사용
 
    </div>
  )
}

export default Wrapper

props 를 통해 컴포넌트에게 값 전달하기

State

Component가 생성될 때 갖는 기본값으로, Component 안에서 값을 관리하며, 자식 Component에게 props로 전달할 수 있다.

State는 컴포넌트 내부에 존재하고 있기 때문에, 상태값 변경이 가능하다는 것이다.

props처럼 부모 컴포넌트가 내려주는 것 말고, 컴포넌트 자신이 어떤 값을 관리하고싶다면 그때는 state를 사용하며 컴포넌트에서 유동적인 데이터를 다룰 때, state 를 사용한다.
React.js 어플리케이션을 만들 땐, state를 사용하는 컴포넌트의 갯수를 최소화 하는 노력을 해야한다.

예를들어, 10 개의 컴포넌트에서 유동적인 데이터를 사용 하게 될 땐, 각 데이터에 state를 사용 할 게 아니라, props 를 사용하고 10 개의 컴포넌트를 포함시키는 container 컴포넌트를 사용하는 것이 효율적이다.

state 예시

post라는 컴포넌트에서 getInitialState를 통해서 컴포넌트 내에서 쓰일 state값을 리턴받게 된다. getInitialState는 return을 통해 state 초기값을 반환해 주게 되는데, 이렇게 함으로써 컴포넌트 내부에서는 this.state를 통해 상태값을 제어할 수 있게 된다.

render 함수에서는 바로 getInitialState에서 받은 state값 중, title을 출력하고 있음을 알 수 있다. 이렇게 초기화된 state값을 출력할 수 있지만, 중간에 state값을 바꿔줄 수도 있다.

출처: 더 알아보기