props와 state

📌 props

props 기본 개념

컴포넌트끼리의 정보교환 방식이며,

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터를 의미한다.

 

props는 아래와 같은 특징을 가진다.

• 반드시 위에서 아래로 흐른다. [부모] -> [자식] 방향으로만 (단방향) 흐름  * 같은 레벨의 형제 컴포넌트에서도 데이터 공유 불가
• 반드시 읽기 전용으로 취급하며, 컴포넌트 내부에서 변경하지 않는다.

// props 부모 -> 자식 정보 전달

// 부모로부터 정보 전달받음
function Son(props) { // props 객체 형태로 정보를 받아옴
    console.log(props.motherName) // 이영애
    return <div>나는 {props.motherName}의 아들이에요</div> // 나는 이영애의 아들이에요
}

// 자식에게 정보 전달함
function Mother() {
    const name = "이영애"
    return <Son motherName = {name} /> // Son 컴포넌트에 데이터 전달
}

 

props children

태그 중간에 값을 적어서 내려주는 것

props 기본 형태와 다르게 변수 선언 과정이 없다.

// props 기본 형태
function App() {
	const hi = "안녕하세요!"; // 변수 선언과 할당
    return <User hi = {hi} />; // 데이터를 자식 컴포넌트에 내려줌
}

function User(props) { // 부모 컴포넌트로부터 props 객체(데이터) 받음
	return <div>{props.hi}</div>; // props객체로 받아온 변수를 불러옴
}

// 결과값
// 안녕하세요!



// props children
function App() {
	return <User>안녕하세요!</User>; // 데이터를 변수 없이 내려줌
}

function User(props) { // 부모 컴포넌트로부터 props 객체(데이터) 받음
	return <div>{props.children}</div>; // props객체로 받아온 변수를 불러옴
}

// 결과값
// 안녕하세요!

 

이러한 props children 형태를 활용하는 방법으로는

파일이 나뉘어 있을 때 상단에 import하고 children을 불러올 수 있다.

 

그런데 props를 객체 자체로 내려주면 어떤 정보인지 명확히 알기 어려우므로

추후 수정을 하거나 협업 시에 문제가 발생할 수 있다.

 

이를 해결할 수 있는 방법은 구조분해 할당으로 각각의 값에 명확한 이름(=변수명)을 부여하는 것이다.

아래 코드는 파일을 나누어 props children을 사용하면서, 구조 분해 할당으로 데이터를 명확히 해주는 예시 코드이다.

// App.js 파일
import React, { useState } from "react";
import Child from "Child";

function App() {
	const name = "이오구"
    return (
    	<Child age={21} name={name}>안녕하세요</Child>
    )
}

export default App;


// Child.js 파일
import React from "react";

function Child({age, name, children}) { // 구조 분해 할당
	console.log(age) // 21
    console.log(name) // 이오구
    console.log(children) // 안녕하세요
    return <div>Child</div>; // Child
}

export default Child;

 

 

default props

값이 부모 컴포넌트로부터 내려오지 않을 때 undefind가 출력되는데, 이때 다른 값이 출력되도록 초기값을 설정할 수 있다.

컴포넌트이름.defaultProps = {
	변수명: "초기값"
}

 

 

아래 예시는 props children 예시 코드에 default props 예시를 적용한 코드이다.

// App.js 파일
import React, { useState } from "react";
import Child from "Child";

function App() {
	const name = "이오구"
    return (
    	<Child name={name}>안녕하세요</Child>
    )
}

export default App;


// Child.js 파일
import React from "react";

function Child({age, name, children}) { // 구조 분해 할당
	console.log(age) // 기본나이
    console.log(name) // 이오구
    console.log(children) // 안녕하세요
    return <div>Child</div>; // Child
}

Child.defaultProps = {
	age: "기본 나이"
}

export default Child;

 

 

 

📌 state

UI를 바꾸기 위해 사용한다.

props와 다르게 컴포넌트 안에서 관리된다.

 

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다.

state가 변경되면, 컴포넌트는 리렌더링된다.

// state
function App() {
	const [name, setName] = useState("이영애")
    
    return (
    <div>
        {name}
        <br />
        <button onClick={funtion () {
        	setName("김영애"); // 김영애 (버튼 클릭시 김영애로 변경)
        }>
        클릭</button>
    </div>
    )
}

 

 

📌 props와 state 공통점

• 일반 JS 객체(=순수한 자바스크립트 객체)이다.
• 렌더링 결과물에 영향을 주는 정보를 가지고 있다. (=렌더링을 트리거 한다, 렌더링을 유발한다)
• 결정론적(deterministic)이다.

'결정론적'이란 예측한 그대로 동작하는 알고리즘을 뜻한다. 동일한 입력에서 같은 결과를 낸다.

 

 

 

📌 props와 state 차이점

props는 (함수 매개 변수처럼) 상위 컴포넌트에서 하위 컴포넌트로 전달되는 반면, state는 (함수 내에 선언된 변수처럼) 하나의 컴포넌트 안에서 관리된다.

props는 상위 컴포넌트에서 설정한 정보를 포함하며(기본값을 설정 가능) 컴포넌트 내부에서 변경할 수 없다. state는 자체적으로 초기화, 변경 및 사용할 컴포넌트에 대한 "비공개" 정보가 포함되어 있다. 상, 하위 컴포넌트에서 변경이 불가하다.

 

	props	state
상위(부모) 컴포넌트(Component: 구성 요소)에서 초기값을 가져올 수 있는가?	Yes	Yes
상위(부모) 컴포넌트에서 변경할 수 있는가?	Yes	No
컴포넌트 내부에 기본값을 설정할 수 있는가?	Yes	Yes
컴포넌트 내부에서 변경할 수 있는가?	No	Yes
하위(자식) 컴포넌트에 대한 초기 값을 설정할 수 있는가?	Yes	Yes
하위(자식) 컴포넌트에서 변경할 수 있는가?	Yes	No

 

 

 

 

 

🔗 Reference

state와 props 차이 표

https://ko.legacy.reactjs.org/docs/faq-state.html

스파르타 리액트 강의