❗리액트에서는 재사용성과 효율적인 코드관리를 위해 컴포넌트를 분리하는 것이 중요하다❗
나의 경우 ..
사이드바를 내 페이지에서 사용할 수 있게
(장비 목록 클릭 ➡️ 사이드바 열림이 되도록 해야하는 상황이였다!)
사이드바와 장비 목록의 파일은 다른데 ..........
이럴때는 어떻게 해야할까 ?
바로
바로
...
⭐⭐⭐
!! PROPs !!
⭐⭐⭐
props은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방식으로
리액트에서 컴포넌트 재사용에 있어 아주 중요한 개념이다 😊
예시와 함께 살펴보면 >>
// 부모 컴포넌트
const ParentComponent = () => {
const message = "Hello, World!";
return <ChildComponent message={message} />;
};
// 자식 컴포넌트
const ChildComponent = (props: { message: string }) => {
return <h1>{props.message}</h1>;
};위 코드에서 ParentComponent는
ChildComponent에 message라는 값을 props로 전달하고
자식 컴포넌트는 이를 props.message로 받아서 출력한다.
이제
특징을 살펴보며
props에 대해 제대로 이해해보자 🐸
특징
1. 리액트의 단방향 데이터 흐름
리액트는 단방향 데이터 흐름을 따른다!
데이터는
부모 -> 자식 방향으로만!
전달할 수 있다는 것이다.
(( 내 코드에서는 selectedEquipment를
부모 컴포넌트( EquipmentContainer )에서 ➡️ 자식 컴포넌트( CustomSidebar )로 전달하고 있다. ))
2. Props는 읽기전용 😮
props의 경우 데이터를 읽기 전용 데이터로 전달한다.
즉!
일반적으로 자식 컴포넌트에서는 내용을 수정할 수 없고❌
부모가 전달한 값을 그대로~~ 사용해야한다.
(자식에서 변경하고싶다면 콜백함수를 사용해서 부모에게 변경 요청을 보내야한다. )
3. props가 변하면 리렌더링
props가 바뀌면 컴포넌트가 리렌더링 된다.
즉 ,
|⭐ 부모-데이터 ➡️ 자식 컴포넌트 ➡️ 자식컴포넌트 리렌더링 ⭐|
인 구조다.
내 코드를 살펴보면 )
selectedEquipment는 데이터고, 이 값을 props로 전달한다.
① 부모에서 selectedEquipment가 변경될 때마다,
② 자식 컴포넌트(CustomSidebar)도 변경된 데이터를 자동으로 받아서
③ 리렌더링!
3. 함수 전달
데이터를 전달할 뿐만 아니라,
함수도 전달할 수 있다.
예를 들어 !
부모 컴포넌트에서 자식에게 상태를 변경하는 함수를 전달하여,
자식 컴포넌트에서 그 함수를 실행할 수 있습니다.
// 부모 컴포넌트
const ParentComponent = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return <ChildComponent increment={increment} />;
};
// 자식 컴포넌트
const ChildComponent = (props: { increment: () => void }) => {
return <button onClick={props.increment}>Increment</button>;
};위 코드에서 increment 함수는 부모에서 자식 컴포넌트로 전달되고,
자식 컴포넌트에서 그 함수를 호출하여 부모의 상태를 변경할 수 있다.
🐸정리⭐
Props는 | 컴포넌트 간의 데이터 공유를 가능하게 하는 데이터 전달의 핵심 !! |
컴포넌트 간의 관계를 형성하고,
.
.
특징으로는
1. 단방향 데이터 흐름
2. 읽기 전용 _ 자식에서 내용 변경할 수 없음
상태 관리가 필요한 컴포넌트에서는 useState나 useReducer를 사용해야 !~!
3. Props가 변경되면 해당 컴포넌트는 리렌더링
.
.
장점은 !
컴포넌트 재사용성 높여줌 👍
끝 🥰
