처음 프로젝트 받았을 때 소스코드 검토하는 법
1)package.json
- (디펜던시)의존성확인
2)index.html -> index.js -> router.js
복잡한 코드에 대해 설명하는 주석 지양해야하는 이유 : 코드가 업데이트될때마다 설명도 업데이트해야되는데 쉽지않다. 그러므로, 코드설명하는 주석 대신 코드를 쉽게 수정할것
코드설명을 제외한 주석활용 : 나중에 들어올 기능, 추가 디벨롭 예정사항 등 마킹
//TODO : ~나중에 할일,나중에 고칠사항 마킹,
//FIXME: ~
나중에는 TODO / FIXME를 검색해서 업무를 진행하기도 함
개발버전에서 진행하고, 마스터에 MERGE되기 전까지는 TODO/FIXME 모두 해결해서 없도록 하는것이 국룰
useState는 관심사에 따라 묶어준다 =>어떤 목적을 가지고 있는지 판단
isValueTrue ->불리언을 말하는건가? 값이 TRUE라는건가 오해의 소지있음. 변수명과 네이밍 정확하게
함수 분리하는 이유->유지보수를 최대한 쉽게 하기 위해서. 한가지가 바뀌었을때 어디까지 수정해야하는지를 줄어주는것. 지금은 너무작아서 안쪼개도, 나중에는 점점 커질수 있으므로 목적단위로 쪼개라.
fetch에서 localhost;3000T쓰지마라. 바로 퍼블릭 이하의 경로를 작성해줄것. ㅣocal host3000은 포트번호 변경되거나 배포후에는 url이나 다른 ip로 바뀌게된다.
arr, obj, num, string, data등을 접미사로 변수만들지마라
arr/list등 접미사 쓰지말고 복수형을 써라 feed list-> feeds
fetch는 promise를 반환하고
.then => 그 반환값에 뭔가 이하 처리를한다
그것을 연속해서 처리하는게...
.then
.then 연속사용도 가능해 마치 (Array.map(x->x).map
.then은 프로미스에만 사용할 수 있다.
비동기상황을 쉽게 표현하기 위해 만든 객체가 바로 promise
feeds.map() 괄호안에 element를 쓰거나 data를 쓰거나 등등...
사실 feed를 쓰면된다. feeds 내부값을 배열로 돌릴건데, 각각의 값이 feed이므로...
]
const Feed=({Feeds})=>{
const {id, topUser img 등등}= Feeds 구조분해
prefer const. let쓰면 나중에 얘가바뀔값인지 오해하게됨
코멘트, push하지말고
먼저 newCOmment만들어서 값을 넣고
이후에 newcommentArry=[...commentArr, newComment]이런식으로 선언적으로 쓰면 좋다.
리액트 쓸때 주의할 점
리액트의 근간 - state, props, effect
state를 언제써야하는가?
초기 리액트 개발자는 모든 변수를 state를 가져가려고 하는데, 그럴필요가 있나?
스테이트 바뀔떄마다 리랜더링되므로 부하도 많이 걸린다.데이터를 꼭 set으로 넣어야하므로 불편..
[리액트로 사고하기]다시 읽어보고 코드쳐보기
state쓰는기준
1)부모를 통해 전달됩니까? 아닙니다 =>유지보수가 굉장히 어려워져요.
-리액트는 단방형 / 하나의 상태를 표현하는 값은 하나다
-부모에서 받은 코멘트를 자식에서 새로운 스테이트로 수정한다면...양쪽의 씽크를 맞춰야되는건데ㅏ,,,하나의 상태를 표현하는 값이 여러개가 되면 힘들어짐
-부모에서 진리의 원천을 가져오면 (useEffect - fetch - get)거기서 데이터를 조작할 수 있는 함수를 만들어서 내려줄 것
시간이 지나도 변하지 않는다? 아닙니다
컴포넌트안에 다른state props로 대체가능한가? 아닙니다
