오늘 할 일
- 알고리즘 1문제
- 새 토이 프로젝트
- React Hooks 공부
알고리즘 1문제
오늘의 문제 : https://programmers.co.kr/learn/courses/30/lessons/12948
새 토이 프로젝트 구상
일전에 구상했던 1일 1알고리즘의 인증 사이트를 제작해보려한다. 투두리스트의 발전된 버전이라고 생각하면 될 것 같은데, 사진까지 하려고하면 DB가 필요할것같아서 일단 사진은 재껴두고 기능적인 구현만 해보려고한다. 상태관리가 핵심이 될 것 같은데 그래서 이번엔 Redux라는 상태관리 라이브러리를 이용하여 제작해 볼 예정이다. 기한은 다음주 화요일까지이다. 이번에도 개발노트를 작성해볼건데, 저번 SPA 프로젝트의 개발노트같은 경우는 코드의 기능적인 부분을 설명할게 별로 없었어서 개발노트가 좀 심심했는데, 이번에는 핵심코드등을 첨부한 알찬 개발노트를 구성해보는것도 하나의 목표로 삼았다.
React Hooks
React의 함수형 컴포넌트의 장점은 기존의 그것보다 훨씬 간편하다는 것이다. this같은 따로 관리를 해 줄 필요없이 생각대로 코드로 구현하면 막힘없이 동작되는것이 참 편하다고 생각했다. 근데 함수형 컴포넌트의 단점은 상태관리의 핵심인 State를 사용할 수 없다는 점이었다. 이 부분 떄문에 상태관리를 해줘야하는 컴포넌트는 Class로 바꿔줘야 하는 번거로움이 있었고 코드들도 일관성이 떨어져 보기에도 별로 좋지 않았다. 그 부분을 해결해 줄 수 있는 것이 바로 React Hooks다.
React Hooks에서의 State는 useState를 사용한다. 함수형 컴포넌트에서도 가변적인 상태를 가질 수 있는 상태 관리용 Hook 이다. object의 형태로 다수의 상태를 한 번에 관리 할 수 있었던 state와 달라 useState는 한 번에 한 가지의 상태만 관리 할 수 있기 때문에, 여러가지의 상태를 관리하려면 useState를 여러가지를 사용하여야 한다.
리엑트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 해주는 Hook은 useEffect이다. componentDidMount 처럼 사용하면 될 것 같다.
그 외에도 다양한 Hook 들이 있는데 일단 개발하면서 주로 사용하게될 기능은 저 두 가지가 될 것 같고, 나머지 Hook들은 개발하면서 필요를 느끼면 가져다가 쓰면서 더 익혀야 할 것 같다.
함수형 컴포넌트는 React의 개발진들이 Hook을 통해 밀어주고 있는 방식이다. 본문에도 굳이 클래스로 구성된 코드들을 함수형으로 바꿀 필요는 없지만 미래를 바라본다면 유지보수성이 좋고 가독성도 뛰어난 함수형 컴포넌트를 추천하고 있다. 앞으로 사용할 Redux와 함께 잘 써먹어서 코드 구성을 치밀하게 해내고 싶다.
내일 할 일
- 알고리즘 1문제
- 토이 프로젝트 시작
- 프로그래밍 관련 유튜브 영상 리뷰해보기
Ghost