React state, props

State & Props

 

 

Props, State 란?

 

• 데이터를 다룰 때 사용되는 개념

 

 

 

 

---

 

 

State 란?

 

• 컴포넌트의 상태를 나타냄
• 가변 데이터 (컴포넌트의 내부에서 선언되기 때문)
• 직접 변경 가능
• 만약 state가 변경되면 컴포넌트를 다시 렌더링 해야함
• 외부에 공개하지 않고, 컴포넌트가 스스로 관리함
• state로 사용하는 것은 컴포넌트의 상태값을 나타내기 위한 것들(리스트에서 선택된 값, 체크박스에서 체크된 값 등)

 

 

	import { useState } from 'react';
	const Counter = ({counter}) => {
	return <div>{counter}</div>
	}
	const StateExample = () => {
	const [count, setCount] = useState(0);
	return (
	<div>
	<Text counter={count} />
	<div onClick={() => setCount(count + 1)}>+</div>
	</div>
	);
	};
	export default StateExample;

view raw props.js hosted with ❤ by GitHub

└ 위의 예시는 + 버튼을 누르면, 화면에 표시된 값을 1 증가 시키는 코드
┌ State를 사용하기 위해 useState라는 Hook을 사용해야 함
├ useState는 State 변수의 초기값을 매개변수로 전달하여 호출하고, 결과값으로는 배열을 반환함
├ 반환된 배열에서는 useState 함수를 호출할 때 설정한 초기값이 할당된 변수와
    해당 변수를 수정하기 위한 Set 함수가 포함되어 있음

├ useState를 사용하여 할당받은 변수는 불변값임

└ 따라서, 해당 값은 직접 수정이 불가능하며 해당 값을 변경하기 위해서는 반드시 Set 함수를 사용해야 함

---

 

 

Props 란?

 

• Properties의 줄임말
• 불변 데이터
• 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터, 읽기 전용 데이터
• 컴포넌트는 상속하는 부모 컴포넌트로부터 props를 받고 이 props는 상속받은 컴포넌트 내에서 수정이 불가능
  └ 리액트에서 부모 → 자식의 일방향성 상속이라는 특징 때문
• 초기 마운트 속도가 빠름
• 불필요한 기능이 없음

 

 

	<div id="name" class="label" onclick="alert('Hello!');">
	Hello!
	</div>

view raw props.js hosted with ❤ by GitHub

└ 위의 예시는 HTML의 div 태그에 id와 class 속성을 설정하고
    onclick 속성에 직접 자바스크립트의 alert 코드를 사용한 코드.

    이처럼 이미 HTML의 속성이라는 개념을 사용해 왔고,
    React에서는 이 속성 개념에 데이터를 전달한다는 개념을 추가 확장한 것임

 

	const Hi = ({hi}) => {
	return <div>{hi}</div>
	}
	const Props = () => {
	return <Hi hi='Hello!'/>
	}

view raw props.js hosted with ❤ by GitHub

└ 위와 같이 부모 컴포넌트에서 자식 컴포넌트에 속성을 이용하여 Hello!라는 문자열 데이터를 전달함