📚 23.10.31
- 브레드 크럼
- 과제-고양이사진첩Develop
브레드크럼
Breadcrumb, 헨젤 그레텔에서 자신이 온길에 흘린 빵 부스러기로 온 길을 알 수 있었듯이, 웹페이지에서 최상위부터 현재까지의 경로를 알려준다.
- 구현방법
최상위 App.js의 state에 경로를 저장할 배열을 만든다.
이후 클릭 등의 경로 이동이 발생하면 해당 배열에 추가한다.
this.state = {
isRoot: true,
isLoading: false,
nodes: [],
paths: [], //브레드크럼! 현재까지의 경로
};// ...
onClick: async (node) => {
if (node.type === "DIRECTORY") {
await fetchNodes(node.id);
this.setState({
...this.state,
paths: [...this.state.paths, node],
});this.state.paths.push(node);이렇게 직접수정보단, 위의 코드처럼 setState로 변경하자! 상태(state)니까 직접 수정은 지양하자
컴포넌트 구조
컴포넌트는 독립적으로 돌아갈 수 있고, 다른 컴포넌트로에 의존성을 최소화하자.
App에서 중앙관리로서 컴포넌트를 잘 조율하도록 하자
요구 사항을 잘 보고 어떤 컴포넌트들을 만들고 조합할지 한번 정리하고 코드를 작성하자.
- 컴포넌트들이 어떻게 동작하는지, 어떻게 엮여있는지
- App에서 전체 state를 가지고, 컴포넌트는 이 state를 내려받고 그 state의 변화에 따라 컴포넌트가 변화되는 흐름을 이해하자.
함수의 호이스팅
문득..정말 문득 든 의문 하나,
함수 표현식 const func = () => { } 은 호이스팅 되지 않는다고 하였는데,
this.setState = (nextState) => {
this.state = nextState;
this.render();
};
...
this.render = () => {
const documents = this.state;
};
this.render();이런 상황에서, this.setState는 자신보다 늦게 선언되는 this.render()를 어떻게 호출하지 ??
setState 함수 내부 로직에 있을 뿐, "실행"이 되지 않아서 괜찮은건가? 의 의문이 들어 팀원들과 이야기 나눠보았다.
팀원들끼리 열심히 이야기해본 끝에 결론은 내 가정과 비슷하다.
render가 setState에 호출되었지만 실행된 것은 아니기에 가능하다
멘토님께 의견 더 여쭤보고 보완하자!
고양이 사진첩 Develop #1
과제 코드리뷰 제출과 동시에 다음 과제... C'mon...
정합성 체크
정합성...? 단어가 조금 낯설었다.
정합성 체크라 하면 "데이터에 대해서, 컴퓨터에 설정된 처리 규칙과의 일관성 여부를 확인하는 검사."를 뜻한다고 한다.
코드에 적용하여 생각하자면, 데이터를 서버로부터 받고 이를 컴포넌트의 setState에 넘기면서 상태에 반영하는데 이 때, 그 상태가 가져야 하는 형식, 타입에 맞는지 확인하는 작업이 될 것이다.
내가 구현한 로직
1. 타입을 알아낸다
2. 기존 state와 변경할 nextState의 타입이 동일한지 확인한다.
내가 느낀 정합성 체크의 필요성
혹시나 서버에서의 데이터 변경 등이 생겨서 데이터가 꼬이는 경우에 큰 역할을 하겠지만, 내가 개발하면서 느낀 점은 내가 실수한 부분도 찾아준다 ..ㅎ
컴포넌트를 선언하면서 InitialState를 설정하는데, 종종 필요하다 생각해서 만들어두고 필요가 없어졌을 때 미처 지우지 못한 값에 대해 바로 잡아낸다!!!
🫨 느낀 점
브레드크럼 사용 방법 외에도 로딩중 처리, 컴포넌트 구조 등을 배울 수 있었다. 특히, 최상단인 App에서 state들을 중앙관리한다는 것을 직관적으로 배울 수 있었다. 그동안의 실습도 비슷한 방법이었는데, 이번 노션 과제에 내가 조금 비효율적으로 적용했다고 느꼈다. 중앙관리 메모메모!
🤔 오늘 회고
Keep
실습의 연장선인 과제를 할 때 많이 배우는 것 같다. 가이드 없이 직접 해보고 찾아보는 것에서 많이 배울 수 있었다.
Problem
코드리뷰 받은 것과 다른 분들의 코드를 보면서 나에게 적용해야겠다고 느낀 부분을 바로 적용해두지 않아서 몇개는 까먹었다..
느낀점에 적었듯이 상태관리에 있어서 수정할 부분이 많다. 중앙관리에 유의하자..
Try
내가 받은 리뷰, 우리팀 코드 외에도 많이 찾아보자! 뭐가 다른가 왜 다른가 많이 생각해봐야겠다.
