[React] props vs state

 

React props vs state 기본 개념

 

React Functional Component props, state state hooks?

 

 

React props vs state

 

React로 프로그래밍을 할 때는 데이터 흐름을 잘 관리해야 한다. 리액트 내에서 사용할 수 있는 데이터는 props와 state로 나뉘게 된다. 정보를 어떤 형태로 관리할 지 고민이 필요하다. 

Props

컴포넌트들의 속성값이며 변하지 않는 값을 의미한다. 실생활의 데이터를 보면 성별, 주민번호, 여권번호 등 변하지 않는 고유한 속성값을 나타낼 때 사용하는 데이터 속성이다. props은 외부로부터 전달받게 되는 값으로 통상 부모 컴포넌트(상위 컴포넌트)로 부터 전달받게 됨.

컴포넌트가 최초 렌더링 되는 시점에서 화면에 출력되는 초기값을 표현하거나 변하지 않는 고정값을 표현할 때 사용된다. props의 데이터타입은 객체로 표현된다. 또한 props는 읽기 전용이다. 

React의 큰 철학 중 하나가 바로 하향식 데이터 흐름이다.

 

React is all about one-way data flow down the component hierarchy.

만약 props를 전달받은 하위 컴포넌트에서 임의로 값을 변경하게 된다면 상위 컴포넌트의 데이터가 변경되고 의도치 않은 부작용이 발생될 수 있기 때문에 주의가 필요하다. 

 

State

현재 컴포넌트에서 변할 수 있는 데이터는 state로 관리하게 된다. 실생활에서는 나이, 전화번호, 집 주소, 학년 등 변경가능한 데이터는 state로 다뤄야 한다. 

컴포넌트 내에서 변경되는 값을 다루고 있기 때문에 만약 state 값이 변경되면 리액트 컴포넌트는 리렌더링이 되게 된다. 

State는 useState를 사용해서 데이터를 관리하게 된다. 강제로 변경을 시도하면 값은 변하지만 리렌더링이 되지 않는 에러가 발생한다. 반드시 useState를 통해서 데이터에 접근해야 한다.

 

① useState를 import 한다.

import { useState } from 'react';

② useState를 호출한다. useState는 초기값을 입력받아 배열을 반환한다. 현재 state 변수와 state값을 변경할 수 있는 setter 함수를 반환한다.

const [ state 현재값, state setter 함수] = useState(state 초기값);

 

props를 전달하는 2가지 방식

 

Props

① 하위 컴포넌트에 전달할 객체 데이터를 생성한다.

② 컴포넌트의 매개변수 형식으로 props값을 전달한다.

③ props 데이터를 렌더링 한다.

 

먼저 생성된 props를 하위 컴포넌트의 속성값에 할당하여 전달하는 방식이 있다. 상위 컴포넌트에서 생성한 props를 하위 컴포넌트의 'attr' 속성에 할당한 후 하위 컴포넌트에서 키값을 찾아 props데이터를 사용한다.

function Parent(){
	const propsData;
	return(
    	<div>
        	<Children attr={propsData}/>
        </div>
    )
}

function Children(props){
	return(
    	<>
        	<p>{props.attr}<p/>
        </>
    )
}

 

두번째 방법으로는 props.children 속성을 이용하는 것. 하위 컴포넌트의 오픈 태그와 클로즈 태그 사이에 props 데이터를 전달한 후 하위 컴포넌트에서는 props.children 키워드를 이용해서 렌더링 할 수 있다.

function Parent(){
	const propsData;
	return(
    	<div>
        	<Children>{propsData}</Children>
        </div>
    )
}

function Children(props){
	return(
    	<>
        	<p>{props.children}<p/>
        </>
    )
}

 

 

props vs state 정리

 

props는 변경 불가능한 값이며, 상위에서 하위로 전달되는 하향식 데이터 흐름을 고수한다.

 

State는 현재 컴포넌트 내에서 변경 가능한 값이다. 만약 state값을 하위 컴포넌트로 전달한다면 하위 컴포넌트에서는 변경이 불가능해야 한다.