[React] State와 Props 개념 알아보기

State

State란, 계속해서 변화하는 특정 상태로 상태에 따라 각각 다른 동작을 수행하는 특징을 가진다.

예를 들어 한 웹 사이트가 다크모드와 라이트모드를 각각 지원한다고 할 때, 각각 모드가 State라고 볼 수 있다.

/* 리액트의 useState를 사용하겠다. */
import React, {useState} from 'react';

/* count는 상태값, setCount는 상태값에 대한 함수, useState의 (0)은 count의 초깃값 */
const [count, setCount] = useState(0);

/* onIncrease 함수는 count를 +1하는 setCount 함수를 실행한다.  */
const onIncreae = () => {setCount(count + 1)};

가장 먼저 상태를 사용하기 위해서는 {useState}를 import 해야 한다. 그다음, 배열 형태로 상태값과 상태값에 대한 함수를 넣어주면 되는데 각각의 이름은 개발자 마음대로 정해줘도 된다.

그리고 상태값을 사용할 때, 상태값이 변화하는 경우 상태값에 대한 함수를 통해 상태값을 변화시켜줘야 한다. (위의 코드에서는 setCount를 통해 {count + 1}이라는 상태값 변화를 주었다.)

 

Props

Props란 컴포넌트에 데이터를 전달하는 방법으로 부모 컴포넌트에서 자식 컴포넌트에게 어떤 값에 이름을 붙여 전달하는 방식이다. 쉽게 말하면, Props는 '전달하는 데이터'라고 생각하면 되고 항상 부모 -> 자식으로 전달된다.

/* 부모 컴포넌트 App */
function App(){
    return (
        <div>
            <Counter initialValue = {5} />
        </div>
    );
};

/* 자식 컴포넌트 Counter */
const Counter = (props) => {
    console.log(props.initialValue);  //  5
}

props는 항상 부모 -> 자식 컴포넌트로 전달 가능하기 때문에, 부모 컴포넌트인 App에서 자식 컴포넌트인  Counter에 initialValue = {5}라는 props를 전달했다. 부모 컴포넌트에서 전달한 것을 자식 컴포넌트에서 받아야 하는데, 받는 방법은 컴포넌트의 파라미터 안에 props를 넣고 사용할 땐 점 표기법을 통해 props.initialValue 형식으로 받아오면 된다. 위 코드와 같은 경우는 props가 1개인 경우이다. 하지만, 하나의 컴포넌트에서 2개 이상의 props를 전달받는 경우도 많다.

 

/* 부모 컴포넌트 App */
function App(){
    const counterProps = {a: 1, b: 2, c: 3, d: 4, e: 5};
    return (
        <div>
            <Counter {...counterProps} />
        </div>
    );
};

/* 자식 컴포넌트 Counter */
const Counter = (apple) => {  //  apple === counterProps
    console.log(apple.a);  //  1
}

// { }로 안 묶으면 Props 전체를 반환
const Counter = (e) => {  //  e === counterProps
    console.log(e);  //  {a: 1, b: 2, c: 3, d: 4, e: 5}
}

// 객체 전체가 아닌 특정 value 값만 받아올 땐 { }로 묶기
const Counter = ({e}) => {
    console.log(e);  //  5
}

// 여러 개의 props를 가져오는 것도 가능
const Counter = ({c, d}) => {
    console.log(c, d);  //  3 4
}

전달하려는 Props가 많을 때는 따로 객체로 만들어서 선언해 준 다음, 전개 연산자(...)를 통해 자식 컴포넌트로 넘겨주면 좀 더 깔끔하게 넘겨줄 수 있다. Props를 받는 자식 컴포넌트에서는 객체 일부가 아닌 객체 전체를 받아오게 되는데, 위의 코드를 보면 apple이라고 해도 counterProps 전체를 받아오는 것을 볼 수 있다. 전체가 아닌 특정 Props만 받고 싶다면, { }를 묶어서 { e } 형식으로 받아오면 된다.

 

/* 자식 컴포넌트 Counter */
const Counter = (counterProps) => {
    console.log(counterProps.f);  //  undefined
}

// 자식 컴포넌트에서 자체적으로 Props 생성하기
const Counter = (counterProps) => {
    console.log(counterProps.f);  //  6
}

Counter.defaultProps = {f: 6};

부모 컴포넌트에서 자식 컴포넌트에게 Props를 전달할 때 실수로 빼먹고 특정 Props를 전달하지 못하는 경우가 생길 수도 있다. 이런 경우 다시 부모 컴포넌트에서 특정 Props를 전달하면 되긴 하지만, 자식 컴포넌트에서 defaultProps를 통해 간단히 Props의 기본값을 정해줄 수도 있다.

 

State와 Props 함께 사용

import React, {useState} from 'react';

const Counter = (counterProps) => {
    const [count, setCount] = useState(counterProps.a);
    console.log(count);  //  1
}

State의 초깃값을 Props로 받아온 counterProps.a를 줘서 count를 1로 만들었다. 즉, Props로 받아온 데이터를 통해 State 값을 변경한 것이다.

 

State는 변화하는 값.
Props는 부모가 자식에게 전달하는 데이터.