210215_TIL

🍎 오늘 한 일

---

✔️ React - Recast.ly
유튜브 페이지처럼 데이터에 따라서 영상 목록이 쭉 뜨고, 목록에 있는 영상들 중 중 하나를 선택하면 해당 영상을 볼 수 있는 플레이어가 뜨는 페이지를 리액트를 이용해서 만들었다. 그래도 처음 접했을 때 보다는 편리함을 아주 조금씩 느껴가고 있는데, 데이터 흐름이 일방통행이기 때문에 뭔가 좀 더 복잡한걸 만들게 되면 꼭 각 컴포넌트의 기능과 관계도, 데이터 흐름도를 정리해야겠다는 생각이 들었다. 컴포넌트 단위의 개발에 최적화된 스토리북이라는 도구도 써봤는데 스토리북도 잘 알아두면 유용하게 쓰일 것같아서 (리액트부터 마스터하고) 공부해봐야겠다.! 

✔️ Toy - BFS
DFS방식을 조금 응용해서 BFS 문제도 풀어보았다. DFS에서의 깊이가 결국 BFS에서는 순서를 결정하는데, 결국 깊이는 재귀가 반복되는 횟수이기 때문에, 반복횟수를 기준으로 요소들을 정렬해서 풀 수 있었다.

✔️ React - twittler 기능 추가
원래는 글을 업로드하는 기능밖에 없었는데 필터링, 클리어 기능을 추가해봤다. 클리어 버튼을 누르면 지금까지 썼던 글들이 초기화되어 없어지도록 했다. 필터링 기능은 각 게시물에서 작성자 이름을 클릭하면 해당 작성자가 작성한 글들만 골라 보여주는 기능이다. 순수 Javascript만 쓸 때는 정말 그냥 조건문, 반복문만 사용해서 구현했던 것 같은데 컴포넌트들이 상호작용하는 리액트에서는 여러번 데이터와 이벤트를 주고받아서 훨씬 고려할게 많은 느낌이었다. 

✔️ React - Hooks 공부
컴포넌트를 생성할 때 클래스형으로만 사용해왔는데 공식 매뉴얼에서도 Hooks를 쓸걸 권장해서 함수형에도 도전을 해봤다. state를 관리할 때 사용하는 메서드도 다르고 종류도 더 다양해서 함수형에도 좀 더 익숙해지도록 노력해야겠다.. 

 

🍎 기억할 것

---

✔️ Hooks - useState
- 한 함수당 하나의 상태값만 관리 가능
- 인자1 = 상태값
- 인자2 = 상태설정함수

✔️ Hooks - useEffect
- 기본 렌더링 직후 실행, 두번째 [인자] 값에 따라 실행조건이 달라짐
- componenetDidMount + componentDidUpdate 같은 느낌

 

🍎 더 공부할 것

---

✔️ React - Hooks