2023. 2. 25. 13:09, TIL
오늘 진행한 것들 🤔
- 리액트 공부
- 타입스크립트로 리액트 프로젝트 진행
- 타입 지정하는법 학습
- 인터페이스로 props 를 넘기는 법 학습 (파라미터로 넘기는법)
- 테일윈드 / styled component 학습
- 테일윈드가 컴포넌트 내부에 선언될시에 코드가 정신이 없어지는 것을 방지하기 위해서 스타일드 컴포넌트에 테일윈드를 적용하는법을 배웠다.
- 커스텀 훅 응용
- Material UI 응용
- 타입스크립트로 리액트 프로젝트 진행
- 프로젝트 진행
- 메인페이지 뼈대 템플릿 구성
- 메인페이지 보드 구현
- 커스텀 모달 구현
- 커스텀 네비바 구현 (모바일용)
- 반응형 템플릿 구현
오늘 겪었던 문제 🤔
- 반복문으로 리스트를 반환해주는 컴포넌트를 생성시에 타입스크립트가 타입 오류를 내뿜는 문제가 있었다.
- 이유는 단순히 컴포넌트는 단 하나만의 영역을 반환해야 하는데 array 타입을 반환해서 생기는 문제였다.
- <> 와 </> 로 감싸주면 오류가 발생하지 않는다.
오늘의 배운점🤔
- 커스텀 훅을 응용해보았다.
- 검색을 해보니까 단순히 state 로 상태만 관리하게 된다면, 값이 변경될때마다 해당 컴포넌트가 리렌더링이 된다는 사실을 알게 되었다.
- 내가 누군가..? 나는 직전까지 백엔드를 찍먹해봤던 응애 개발자.. 나에게 있어서 성능 하락은 용납되지 않는다.
- 코드를 조금이라도 줄이고, 반복되는 핵심 로직은 밖으로 빼낼 필요가 있었다.
- 리액트 같은 경우에는 백엔드와 비슷하게 성능을 신경써야 하는 부분이있었다.
- 백엔드같은 경우에는 데이터베이스 접근 빈도라던가, 한번에 여러개의 데이터를 불러올때의 속도라던지.. 가 있다고 친다면, 프론트엔드는 리렌더링 되는 횟수가 성능에 영향을 끼치는것 같았다.
- 거기에 가장 좋은 코드는 유지보수가 가능한 코드가 아니던가 ..?
- 그래서 알아낸게 useCallback 과 커스텀훅이었다
- 커스텀훅 같은 경우에는 핵심 로직을 굳이 밖에다 빼놓을 필요도 없고, 코드를 줄이고 싶고, 밖에다 주구장창 state 와 effect 를 적어둘 필요를 줄여준다.
- 리액트의 꽃은 아무래도 컴포넌트의 재사용성을 높여서 최대한 블록 끼워맞추기 처럼 이랬다 저랬다 하는데 지장이 없도록 하는게 아닐까.. 라는 생각이 든다.
- 리액트에서 제공해주는걸 백분 활용해서 컴포넌트를 만들다보면 차곡차곡 쌓여서 정말 홈페이지를 구성하기 너무 간편해진다. 제이쿼리로 주구장창 당장 확인도 ㅇ잘 안되는 코드를 작성했을때 얼마나 답답했던지.. 리액트 최고
'TIL' 카테고리의 다른 글
23-02-09~10 TIL (0) | 2023.02.10 |
---|---|
23-02-06 TIL (0) | 2023.02.07 |
23-02-01~02 TIL (0) | 2023.02.03 |
23-01-31 TIL (0) | 2023.02.01 |
23-01-30 TIL (0) | 2023.01.30 |
Comments, Trackbacks