1차 프로젝트 | 라이브코드 리뷰

주미·2022년 2월 13일

🔥 라이브코드 리뷰로 배운 것

기획에 매달리지 말고 하드코딩이라도 해보기
기획이 완벽하게 한 상태로 코딩을 하려고 하는 건 리소스 적인 낭비이고 팀으로 협업하는 과정에서도 좋지 않기 때문에 하드코딩이라도 하면서 접근하기
최대한 useState를 이용해서 접근을 하고 나중에 리팩토링( state로 한 것 중에 상수값으로 바꿀만하다 하는 것들 바꾸게 되고, state로 굳이 처리 안하도 되겠네 하면서 계속 고쳐나가며 진행)
‘비동기적’이다 === (쉽게말하자면) 어느정도 시간이 걸린다
Fetch, set(useState쓸 때), count 같은 함수는 다 비동기 적이라 같이 사용하게 되면 서로 작동 안할 수 도 있음. 서로 걸리는 시간이 달라서(비동기적인 성격떄문에) 꼬여버리기 때문.
콜백함수를 쓸까말까?

Const [count, setCount] = useState(‘0’)
Setcount (count +1) // 1번
setCount(count -> count + 1)// 2번

2번 경우가 훨씬 좋은 로직인데 그렇다고 무조건 다 저렇게 하는 게 좋은 건 또 아님

두 가지 상태값 왔다갔다하는 것(예를들어 토글같은)이 있다면, 이전의 상태값이 중요함.

on인지 off인지 모르지만 그 전 상태값에 비해서 반대값이 나와야 한다면 2번처럼.

이전에 상태값이 뭐였던 간에 상관없을 경우에는 1번

예시를 들어보면, 모달창같은 경우에는 어떨까 생각해보면 정해진 답은 없음.

기획적으로 달라질수도, 만드는 사람에 따라 달라질 수도 있기 때문에 기획에 맞춰 왜 그런 로직을 선택했는지 설명하는 게 중요한 거임.

❗️회고시간에 자기가 구현한 기능에 대해서 완벽히 소화,이해,설명해보는게 좋음. 꼭. 필수

useEffect가 추가된 5번의 연장선

Const [data, setData] = useState([]);
useEffect(()=>{
fetch(‘http:’)
.then(res=>res.json())

.then(res=>setData(res.result))

},[])

console.log(data)

// 1. []
// 2. [업데이트 된 데이터]

return( <div>{data.map((ele)=>{})}</div>