State & Props

🌴 React State & Props

State(상태)란 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값을 말한다.

🌱 Props vs State

🍃 Props

props는 외부로부터 전달받은 값(위로부터 인자와 같이 넘겨받음) - 변하지 않는 값을 말한다. (컴포넌트의 속성(property)을 의미한다.) 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당한다.

 

부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 자바스크립트 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환한다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.

 

const[state, setState] = useState(’초기값’)

 

props는 어떤 타입의 값도 넣어 전달할 수 있도록 객체의 형태를 가진다. 그리고 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이기 때문에, 함부로 변경될 수 없는 읽기 전용(read-only)객체이다. 만약 읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수성 시, props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있다.

 

즉, 개발자가 의도하지 않은 side effect가 생기게 되고 이는 React의 단방향, 하향원칙(React is all about one-way data flow down the component hierarchy)에 위배된다.

 

💡 How to use props

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

function Parent() {

return (

<div className="parent">

<h1>I'm the parent</h1>

<Child text={"I'm the eldest child"} sing={"싸이의 강남스타일"} />

<Child />

</div>

);

}

function Child(props) {

console.log(props);

// {text: "I'm the eldest child", sing: "싸이의 강남스타일"}

return (

<div className="child">

<p>{props.text}</p>

<p>{props.sing}</p>

</div>

);

}

export default Parent;

props를 전달하는 또 다른 방법은 여는 태그와 닫는 태그의 사이에 value를 넣어 전달하는 방법이 있다. 이 경우 props.children을 이용하면 해당 value에 접근하여 사용할 수 있다.

function Parent() {

return (

<div className="parent">

<h1>I'm the parent</h1>

<Child sing={"싸이의 That That"}>I'm the eldest child</Child>

</div>

);

}

function Child(props) {

console.log(props);

// {sing: "싸이의 That That", children: "I'm the eldest child"}

console.log(props.children);

// 'I'm the eldest child '

return (

<div className="child">

<p>{props.children}</p>

</div>

);

}

export default Parent;

const App = () => {

const itemOne = "React를";

const itemTwo = "배우고 있습니다.";

return (

<div className="App">

<Learn itemOne={itemOne} itemTwo={itemTwo}/>

</div>

);

};

const Learn = (props) => {

// 전달받은 props 를 아래 <div> tag 사이에 사용하여

// "React를 배우고 있습니다" 라는 문장이 렌더링되도록 컴포넌트를 완성하세요

return <div className="Learn">{props.itemOne} {props.itemTwo}</div>;

};

export default App;

 

🍃 State

State은 내부에서 변화하는 값(함수 컴포넌트 안에서 변하는 값)

예) 나이, 현재 사는 곳, 취업 여부, 결혼 여부, on/off 여부, 숫자 count, CheckBox의 체크 여부

 

State hook, useSate

 

useState 사용법

• useState을 사용하기 위해서는 React로 부터 useState을 불러와야 한다.

import { useState } from "react";

 

• useState을 컴포넌트 안에서 호출해준다. useState을 호출한다는 것은 "state"이라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.

function CheckboxExample() {

// 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked 라고 부른다.

const [isChecked, setIsChecked] = useState(false);

}

 

문법적으로 보면 isChecked, setIsChecked는 useState의 리턴값을 구조 분해 할당한 변수이다.

function CheckboxExample() {

// 1번 코드를 풀어쓰면 2번 코드와 같다.

const [isChecked, setIsChecked] = useState(false); // 1번

const stateHookArray = useState(false); // 2번

const isChecked = stateHookArray[0];

const setIsChecked = stateHookArray[1];

}

 

• useState을 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState의 인자로 넘겨주는 값은 state의 초기값이다.

const [state 저장 변수, state 갱신 함수] = useState(state의 초기값);

function CheckboxExample() {

const [isChecked, setIsChecked] = useState(false);

// const [state 저장 변수, state 갱신 함수] = useState(state 초기값);

}

• isChecked : state를 저장하는 변수
• setIsChecked : state isChecked 를 변경하는 함수
• useState : state hook
• false : state 초깃값

 

이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 된다.

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

 

 

state 갱신하기

• state을 갱신하려면 state 변수를 갱신하는 함수 setIsChecked를 호출한다.

function CheckboxExample() {

const [isChecked, setIsChecked] = useState(false);

const handleChecked = (event) => {

setIsChecked(event.target.checked);

};

return (

<div className="App">

<input type="checkbox" checked={isChecked} onChange={handleChecked} />

<span>{isChecked ? "Checked!!" : "Unchecked"}</span>

</div>
);
}

 

❗️ state hook 사용 시 주의사항

React 컴포넌트는 state이 변경되면 새롭게 호출되고, 리렌더링이 된다. React state는 상태 변경 함수 호출로 변경해야 하고 강제로 변경을 시도하면 안된다.

이는 상태 변경 함수 사용은 React와 개발자의 약속이기 때문에 지켜야 한다. 만약에 강제로 변경을 시도하면, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않는다.

State(상태)란 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값을 말한다.