📌Level 3과제 수행하면서 내용 정리하기
1.React-icons 쓰는 법
yarn add react-icons EHsms
npm install react-cion --save둘 중 하나로 설치해주고 import {IconName} from "react-icons/영역";으로 import 한 다음 IconName에 원하는 거 넣으면 됨!
ex) import { PiCallBell } from "react-icons/pi";
사이트: React Icons
2.과제하면서 헷갈리던 내용 정리
✅props는?
- 부모가 자식에게 전달해주는 값, 파라미터
- JS 객체 형태로 전달됨. 그래서 {}중괄호로 감싸 html에서 JS를 사용할 수있도록 함.
✅useContext 이해하기
전역데이터를 관리하여 prop drilling 현상이 발생하는 것을 방지
💡주요 개념은 3가지
createContext: context 생성Consumer: context 변화 감지Provider: context 전달(to 하위 컴포넌트)
레벨 3과제를 수행하면서 예시사이트 소스를 뜯어봤었는데 이해가 안 가는 부분이 있어서 정리하면서 공부했다.
1)createContext({})를 사용하여 기본값을 빈 객체로 지정하는 이유
- createContext({})를 사용하여 기본값을 빈 객체로 지정하는 이유는 컨텍스트 값을 사용하는 컴포넌트에서 기본값을 제공하기 위해서다.
- 리액트의 createContext 함수는 컨텍스트 객체를 생성하고, 이 함수를 호출할 때 인자로 전달하는 값은 해당 컨텍스트의 기본값이다.
-해당 컨텍스트의 공급자(provider)가 제공하는 값을 사용하지 않을 때, 기본값이 대신 사용된다.- 이는 컨텍스트를 사용하는 컴포넌트가 컨텍스트 값이 없을 때도 안전하게 동작하도록 보장하기 위한 것
-기본값을 빈 객체로 지정하면 컨텍스트 값을 동적으로 업데이트할 수 있다. =>컨텍스트 공급자가 해당 컨텍스트의 값을 변경할 때, 컨텍스트 값을 구독하는 모든 컴포넌트가 업데이트되므로, 컨텍스트 값이 객체이므로 객체의 속성들을 추가, 수정, 제거하여 동적인 상태 변화를 관리할 수 있다.- 따라서, createContext({})를 사용하여 빈 객체를 기본값으로 지정하는 것은 컨텍스트를 사용하는 컴포넌트가 안전하게 동작하고, 동적인 상태 변화를 다룰 수 있도록 하는 데에 도움이 된다.
(feat.챗지...)
2) provider에서 하위 컴포넌트로 context가 전달 될 때는 하위컴포넌트에서 받을 context를 표시해주면 좋음
const {props받을 context1,context2,...}=useContext{createContext의 변수명} 이런 식으로 표시해두기!
✅children이란?
주로 컴포넌트 태그 사이에서 작성되는 형태로 전달됨.
<MyComponent>
<ChildComponent1 />
<ChildComponent2 />
</MyComponent>위 예시에서 MyComponent 사이에 두개는 children으로 전달되는 자식 요소들임. MyComponent 컴포넌트에서는 이러한 자식 요소들을 children 프로퍼티로 접근할 수 있음.
✅children을 하위컴포넌트에 props하는 이유는?
리액트의 컴포넌트 계층 구조에서 부모 컴포넌트와 자식 컴포넌트 간에 내용을 전달하기 위해서이다.
예를 들어
const ParentComponent = ({ children }) => {
return (
<div>
<h1>Parent Component</h1>
{children}
</div>
);
};
const ChildComponent = () => {
return <p>Child Component</p>;
};
const App = () => {
return (
<ParentComponent>
<ChildComponent />
</ParentComponent>
);
};라는 코드가 있을때 ParentComponent는 children을 props로 받고, 이를 JSX에서 자식 컴포넌트로 전달받는다. 그래서<ChildComponent />이 ParentComponent의 children으로 전달되어 ParentComponent의 내부에서 children을 포함하여 렌더링할 수 있습니다.
말하자면, children을 하위 컴포넌트에 props로 전달하는 것은 부모 컴포넌트의 내용을 자식 컴포넌트에서 사용하거나 조작할 수 있게 만들어주는 역할이다.
💡만약에 childrend을 props해주지 않는다면?
위의 예시에서 {chilren}을 ParentComponent에 props 해 주지 않으면, ChildComponent는 ParentComponent의 태그 사이의 내용을 알 수 없으므로, ParentComponent의 태그 사이에 있는 내용은 ChildComponent에서 렌더링되지 않게 된다. 따라서 ParentComponent는 "Parent Component"라는 제목만 표시되고, "Child Component"는 보이지 않게 된다.
✍️느낀점
props 엄청쓰는데 잘 활용하기는 어렵고... 쓰는 hook들 다 얼핏 본 녀석들인데 사용법이 엄청 헷갈린다. 🤮🤮
