둥지

이전글: https://orashelter.tistory.com/933.  리스코프 치환 원칙 (LSP, Liskov Substitution Principle)서브 타입은 언제나 자신의 기반(부모) 타입으로 교체할 수 있어야 함을 의미합니다.이를 리액트로 설명하자면 컴포넌트를 상속할때 부모 컴포넌트의 Props를 그대로 사용할 수 있어야 함을 의미합니다.특정 컴포넌트에서 파생된 다른 컴포넌트가 부모 컴포넌트의 기능을 변경하게 되면 해당 컴포넌트를 사용할 때마다 추가적인 문서화가 필요해져서 프로젝트의 유지보수가 복잡해질 수 있습니다.반면 LSP를 준수하면 동작을 예측할 수 있어 유지보수가 더 용이해집니다.버튼 컴포넌트를 예시로 LSP를 준수하는 IconButton과 LoadingButton을 만들어보겠습니..

SOLID란?SOLID 원칙은 객체 지향 프로그래밍에서 소프트웨어 설계를 개선하기 위한 다섯 가지 원칙을 의미.주로 객체 지향 언어에 많이 사용되지만 언어에 상관 없이 적용할 수 있으며, 이러한 원칙을 적용하면 코드의 유지보수성과 확장성을 높일 수 있음. 1.  단일 책임 원칙 (SRP, Single Responsibility Principle)각 모듈은 하나의 책임만을 가져야 하며, 그 책임은 완전히 캡슐화되어야 함을 의미합니다.여기서 "책임"이란 해당 모듈이 수행해야 하는 기능이나 역할을 의미하며, 그 기능이 변경될 경우에만 해당 클래스나 모듈을 수정해야 함을 의미합니다. 책임의 예시는 다음과 같습니다.- UI 책임: 사용자 인터페이스 렌더링.- 비즈니스 로직 책임: 데이터 처리나 비즈니스 규칙을 적..

두 훅은 둘다 상태 관리를 위해 사용되는 훅이라는 점에서 같은 목적으로 사용됩니다. 두 훅은 각각의 특징이 있는데 아래와 같습니다.useState간단한 상태 관리를 위해 사용됨.useReducer복잡한 상태 로직을 관리하기 위해 사용됨.상태 업데이트 로직을 리듀서 함수로 분리하여 관리함.주로 여러 상태를 포함하거나 상태 변경 로직이 복잡한 경우에 사용. 간단한 토글 상태 혹은 간단한 구조의 데이터를 다루는 경우 useState를 사용하는 것이 좋습니다.하지만 특정 액션에 따라 복잡한 상태 로직 관리가 필요한 경우 예를들어 무한 스크롤에서 아이템요소들이 추가될때 아이템 요소들에 대한 갯수 및 페이지, 오프셋 등을 관리하고자 할때 useReducer가 더 적합할 수 있습니다.

리액트에서 컴포넌트는 생명 주기를 갖습니다.생명 주기란 컴포넌트가 생성되고 사용되고, 소멸되는 과정을 뜻합니다. 함수 컴포넌트에서 생명 주기는 크게 3가지 단계로 구분할 수 있습니다.렌더 (Render)커밋 (Commit)클린업 (Cleanup)이 세 단계를 각각 설명하자면 다음과 같습니다.렌더함수 컴포넌트가 호출되어 JSX가 반환됨.side effect가 호출되지 않음.커밋실제 DOM에 변화가 적용되는 단계.useEffect가 호출되는 단계.클린업컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전 정리 작업을 수행하는 단계.useEffect의 cleanup이 호출되는 단계. 이 단계를 간단히 아래의 코드로 살펴볼 수 있습니다.import React from 'react';function C..

1. Props란?Props란 컴포넌트 간에 데이터를 전달하기 위해 사용됩니다.부모 컴포넌트에서 자식 컴포넌트로 단방향으로 데이터를 전달할 때 사용되며, 자식 컴포넌트는 전달 받은 `props`를 읽기 전용으로 사용하게 됩니다. 2. State란?State란 컴포넌트 내부에서 관리되는 상태를 나타냅니다.상태가 변경되면 컴포넌트는 리렌더링이 일어나게 됩니다.컴포넌트 외부에서는 직접 접근할 수 없습니다. 3. 그렇다면 Props와 State의 차이점은 무엇이 있을까?데이터의 소유와 제어Props: 부모 컴포넌트가 소유하고 제어함.State: 해당 컴포넌트 내부에서 소유하고 제어함.변경 가능성Props: 읽기 전용.State: 컴포넌트 내에서 업데이트 가능.데이터 흐름Props: 부모에서 자식으로 단방향.St..