💡 지연 초기화기본적으로는 useState에 초기값을 넣어주게 되면 state가 뭐 어떻게 변하건 초기값을 계속 불러오게 된다. 하지만 Lazy initialzation 기법(?) 을 사용하면 처음 렌더링 될 때만 호출(동작)된다. 원래 쓰던 방법const getName = () => { /* 막 api 불러오고 */ /* 막 데이터 가공하고 */ /* 막 데이터 정렬하고 */ /* 기타 무거운 코드들 */ return 전국민이름모음}const [name, setName] = useState(getName());초기값으로 getName()에서 반환된 값을 사용한다. 가벼운 작업이나, 상수값 같은 것들은 그냥 써도 되겠지만 혹시 저렇게 작업량이 많고 무거운 값을 반환받아 사용될 경우 성능적인..
ESLint를 설치하고 React 프로젝트를 하다보면 자꾸 뭐 prop 어쩌구 거슬리게 하는 친구가 있다. 프로젝트 root경로에 있는 `eslint.config.js` 파일을 잠깐 손봐주도록 하자. 그럼 rules : { .... } 속성이 보일텐데 여기에 아래 텍스트만 하나 추가해주면 된다 ."react/prop-types": "off" 전체 rules rules: { ...js.configs.recommended.rules, ...react.configs.recommended.rules, ...react.configs['jsx-runtime'].rules, ...reactHooks.configs.recommended.rules, 'react/j..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 이전 리팩토링 과정(1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거](3) - [spread & rest](4) - [불어나는 코드 모듈로 분리]이번 리팩토링은 고정으로 사용되는 초기값, 상수값 등을 상수로 선언하도록 변경했다. 💡 기존 코드function getSlicedOverview(overview) { if (!overview) return "줄거리가 없는디" if (overview.length >= 80) { return `${overview.slice..