웹 프론트엔드
React - State & Props
토리쟁이
2024. 3. 25. 04:21
이번 포스팅에서는 리액트의 State와 Props에 대해 공부해보려고 한다.
props
- 부모 컴포넌트(상위) → 자식 컴포넌트(하위) 방향으로 보내는 데이터 (단방향 데이터 흐름)
- 여러 번 쓰이는 컴포넌트에서 내부 데이터만 다르게 사용하고 싶을 때 사용
- 컴포넌트 속성을 설정할 때 사용하는 요소
- 컴포넌트끼리 데이터를 전달하는 수단
- 부모 컴포넌트에서 props가 전달되지 않았을 때 기본 값으로 특정 값 설정 가능 → defaultProps
- 부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성한 문자열 가져오기 가능 → props.children
- 함수형 컴포넌트에서는 props.name으로 접근/ 클래스형 컴포넌트에서는 this.props.name으로 접근
export function FunctionProps2(props) {
const { name, number, price } = props;
return (
<div>
<h5>{name}</h5>
<p>
{number}개에 {price}원
</p>
<div>{props.children}</div>
<hr />
</div>
);
}
// default Props 설정하기 (넘겨받는 값이 없을 경우, default로 지정할 값)
// 컴포넌트명.defaultProps = {정의할 데이터를 객체로 포함}
FunctionProps2.defaultProps = {
number: 3,
name: "샤인머스캣",
};
state
- React에서 유동적인 데이터를 다루기 위한 객체
- 계속해서 변하는 특정 상태
- 상태에 따라 다른 동작을 함
- state가 변경되면 자동으로 재랜더링 (↔ 변수는 변경되더라도 랜더링되지 않음)
- 함수형 컴포넌트에서는 useState함수를 통해 상태관리를 함
import { useState } from "react";
export default function FunctionState() {
const [isEnglish, setIsEnglish] = useState(true);
function changeLanguage() {
setIsEnglish(!isEnglish); // true->flase->true->false
}
return (
<div className="state">
<div style={{ backgroundColor: "red", color: "#fff" }}>
{isEnglish ? "apple" : "사과"}
</div>
<button onClick={changeLanguage}>
{isEnglish ? "한글" : "영어"}로 변경
</button>
</div>
);
}
참고
https://ko.legacy.reactjs.org/docs/components-and-props.html