DDODI TIL 🚀

React.FC의 문제점 props에는 두 종류가 있다. 명시적 props: props 타입에 명시적으로 작성되어 있는 props 암시적 props:@types/react등에 의해 자동적으로 추가되는 props React.FC의 props는 기본적으로 children을 포함한다. 즉, React.FC를 사용할 경우 children이 암시적 props가 된다. excess props: 컴포넌트에 넘겨지지만 컴포넌트에서 사용되지 않는 props → excess props의 존재는 POLA원칙을 어기게 만든다. POLA: Principle of Least Astonishment 컴포넌트는 사용자가 예상한대로 작동해야 한다는 원칙 암시적 props인 children은 excess props에 해당한다. 사용자 ..

👩🏻‍💻 언제 사용하나요? ✅ React Component Tree의 서로 다른 부분에서 동일한 데이터를 필요로 할 때 위 상황에서 보통은 props를 사용해 데이터를 전달하게 됩니다. 그런데 컴포넌트 간의 거리가 먼 경우, 특정 컴포넌트로 데이터를 전달하기 위해 여러 개의 컴포넌트를 거쳐야 하는 상황이 발생합니다. A | B | C | D 위와 같은 구조로 이뤄진 React Component Tree를 가정해봅시다. A: useState로 데이터를 관리하는 컴포넌트 D: A의 데이터를 바탕으로 UI를 그리는 컴포넌트 라고 가정했을 때, D에게 A의 데이터를 넘겨주려면 어떻게 해야 할까요? B,C가 props로 부모 컴포넌트(각각 A,B)로부터 데이터를 전달 받고, 다시 자식 컴포넌트(각각 C,D)에게 ..

https://beta.reactjs.org/learn/synchronizing-with-effects 위 글을 제가 이해한 바대로 정리한 내용입니당 ‘٩꒰｡•◡•｡꒱۶’ React Docs BETA 라는 사이트인데, 기존 공식 문서보다 훨씬 이해하기 쉽고 친절하게 잘 되어 있어 React의 기본 원리를 이해하기에 좋습니다! React를 대강 쓸 줄은 아는데 깊이가 부족하다고 느껴지시는 분들에게 추천합니당 왕 추천 ❤️‍🔥 👩🏻‍💻 Effect란? two types of logic inside React components Rendering code: describes the UI, must be pure Event handlers: caused by a specific user action Effect..

Union type | 연산자로 여러 개의 타입이 연결된 타입을 의미한다. 이때 | 연산자는 or의 의미를 가지고 있다. 이러한 Union type을 활용해 인터페이스를 정의하고자 했다. 문제 정의 interface Props { data: LectureRoomsPerBuilding | LectureRoomInfo; children?: LectureRoomInfo[]; } 다음과 같이 인터페이스를 작성했는데, 타입 추론에서 문제가 발생했다. export interface LectureRoomInfo { room_name: string; room_uid: RoomUID; } export interface LectureRoomsPerBuilding { building_name: string; building..

사이드바를 구현해보자. 명확한 요구사항 없이 단지 강의실 목록을 조회할 수 있는 사이드바를 구현해야 했다. 어떤 식으로 작동해야 할 지 감이 안와서, 레퍼런스를 참고했다. Ant Design Ant design 컴포넌트에서 다양한 사이드바를 제공하고 있다. 실제로 조작해볼 수 있고, 대략적인 코드도 제공한다. 그 중 위 이미지에 있는 사이드바 컴포넌트를 참고했다. Ant Design 코드의 일부분을 발췌해왔다. 이중 Menu 컴포넌트를 보면, props로 items를 받고 있다. items에 전달되는 예제 객체를 살펴봤더니, children이라는 프로퍼티를 확인할 수 있었다. 여기에는 서브 메뉴들의 정보가 담겨 있다. 즉, Menu 컴포넌트에 서브 메뉴가 포함된 정보를 전달하면 Menu 컴포넌트 내에서 ..

폼 제출 후 응답이 올 때까지 로딩 화면을 띄워보자. 🎈 기존 방식 보통 React에서 로딩 화면을 구현한다면 아래와 같은 방식일 것이다. function LoginPage() { const [loading, setLoading] = useState(null); return ( {loading && } ) } submit 버튼 클릭 ➡️ setLoading(true) ➡️ loading의 상태가 바뀌어 리렌더링 발생, 로딩 UI가 화면에 띄워짐 그러나 react-hook-form을 사용한 경우 해당 방식을 사용할 수 없다. react-hook-form 사이트에 들어가보면, react-hook-form은 form 영역을 제외한 다른 영역의 re-render를 방지하는 기능을 제공한다고 적혀있다. 이때문에 ..