몰아서 쓰는 TIL 23-02-20~24 리액트쟁이

오늘 진행한 것들 🤔

• 리액트 공부
  • 타입스크립트로 리액트 프로젝트 진행
    • 타입 지정하는법 학습 
    • 인터페이스로 props 를 넘기는 법 학습 (파라미터로 넘기는법)
  • 테일윈드 / styled component 학습
    
    • 테일윈드가 컴포넌트 내부에 선언될시에 코드가 정신이 없어지는 것을 방지하기 위해서 스타일드 컴포넌트에 테일윈드를 적용하는법을 배웠다.
  • 커스텀 훅 응용
  • Material UI 응용
• 프로젝트 진행
  • 메인페이지 뼈대 템플릿 구성
  • 메인페이지 보드 구현
  • 커스텀 모달 구현
  • 커스텀 네비바 구현 (모바일용)
  • 반응형 템플릿 구현

기본뼈대

 

모바일버전

 

모바일버전 네비바

 

기본 로그인 화면

 

 

오늘 겪었던 문제 🤔

• 반복문으로 리스트를 반환해주는 컴포넌트를 생성시에 타입스크립트가 타입 오류를 내뿜는 문제가 있었다.
  • 이유는 단순히 컴포넌트는 단 하나만의 영역을 반환해야 하는데 array 타입을 반환해서 생기는 문제였다.
  • <> 와 </> 로 감싸주면 오류가 발생하지 않는다.

오늘의 배운점🤔

 

• 커스텀 훅을 응용해보았다.
  • 검색을 해보니까 단순히 state 로 상태만 관리하게 된다면, 값이 변경될때마다 해당 컴포넌트가 리렌더링이 된다는 사실을 알게 되었다.
  • 내가 누군가..? 나는 직전까지 백엔드를 찍먹해봤던 응애 개발자.. 나에게 있어서 성능 하락은 용납되지 않는다.
  • 코드를 조금이라도 줄이고, 반복되는 핵심 로직은 밖으로 빼낼 필요가 있었다.
  • 리액트 같은 경우에는 백엔드와 비슷하게 성능을 신경써야 하는 부분이있었다.
  • 백엔드같은 경우에는 데이터베이스 접근 빈도라던가, 한번에 여러개의 데이터를 불러올때의 속도라던지.. 가 있다고 친다면, 프론트엔드는 리렌더링 되는 횟수가 성능에 영향을 끼치는것 같았다.
  • 거기에 가장 좋은 코드는 유지보수가 가능한 코드가 아니던가 ..?
  • 그래서 알아낸게 useCallback 과 커스텀훅이었다
    
    • 커스텀훅 같은 경우에는 핵심 로직을 굳이 밖에다 빼놓을 필요도 없고, 코드를 줄이고 싶고, 밖에다 주구장창 state 와 effect 를 적어둘 필요를 줄여준다.

코드를 많이 줄여준다.

거기다 이런식으로 자주 쓰이는 인풋태그라던지.. 를 커스텀 훅으로 관리해버리면 관리하기 수월해진다.

 

• 리액트의 꽃은 아무래도 컴포넌트의 재사용성을 높여서 최대한 블록 끼워맞추기 처럼 이랬다 저랬다 하는데 지장이 없도록 하는게 아닐까.. 라는 생각이 든다.
• 리액트에서 제공해주는걸 백분 활용해서 컴포넌트를 만들다보면 차곡차곡 쌓여서 정말 홈페이지를 구성하기 너무 간편해진다. 제이쿼리로 주구장창 당장 확인도 ㅇ잘 안되는 코드를 작성했을때 얼마나 답답했던지.. 리액트 최고