dev_in 개발 블로그

검색 상태에 사용자가 검색을 시도한 적이 있는지 나타내는 값인 hasSearched를 추가했습니다.이번 프로젝트를 진행하며 직접 코드로 구현하기 전 상태의 종류와 역할을 먼저 생각해보고 정하는 것에 집중하며 주의해보고자 합니다. hasSearched 추가로 달라진 렌더링 분기첫 진입hasSearched = false안내 문구 표시 가능검색 시작 후 로딩hasSearched = trueisLoading = true검색 성공 + 결과 있음hasSearched = trueresults.length > 0검색 성공 + 결과 없음hasSearched = trueresults.length === 0검색 실패hasSearched = trueerror !== null

SearchBar는 프레젠테이셔널 컴포넌트입니다. 검색 상태와 제출 로직을 담당하는 컴포넌트인 SearchSection을 설계한 과정을 정리한 글입니다. 검색 상태 inputValue: 입력 중인 값submittedKeyword: 검색 확정값(공백 제거된 값만 들어간다는 규칙 두기)results: 검색 결과 목록isLoading: 현재 검색 요청이 진행 중인지 나타냄error: 검색 실패 시 보여줄 에러 상태( 문자열 또는 null 구조로 두기) 상태 흐름 설계1단계: 사용자가 입력inputValue 변경2단계: 사용자가 제출inputValue.trim() 수행빈 문자열이면 종료아니면 submittedKeyword 업데이트3단계: 확정된 검색어 감지submittedKeyword가 바뀜검색 실행 시작4단..

React에는 불필요한 리렌더링을 방지하는 방법이 몇 가지 있습니다. 1. React.memo를 활용하여 컴포넌트를 메모이제이션할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않으면 컴포넌트를 리렌더링하지 않도록 합니다. 특히 부모 컴포넌트가 자주 업데이트되는 상황에서 유용합니다. const MemoizedComponent = React.memo(MyComponent); 2. useMemo와 useCallback 훅을 사용하여 각각 값과 함수를 메모이제이션할 수 있습니다. useMemo는 계산 비용이 많이 드는 연산 결과를, useCallback은 자식 컴포넌트에 전달되는 콜백 함수를 메모이제이션합니다. const memoizedValue = useMemo(() => computeExpensiv..