[TIL] 230615

JS 팀과제 피드백

res.json()을 then이나 await을 같이 사용해야 하는 이유

• 내 생각
  then과 await 사용은 데이터 요청을 비동기적으로 처리하는데 코드를 실행하기 전에 JSON 데이터를 사용할 수 있는지 확인해야 하기 때문이다.

선발대 과제

TODO 페이지를 새로고침 해도 변하지 않게 localstorage 사용하기

useEffect를 사용해서 페이지가 로딩되면 working에 원하는 값을 넣어주게 만들었다.

const [working, setworking] = useState([]);
useEffect(() => {
    const data = localStorage.getItem("todokey");
    console.log(working);
    if(data) {
      setworking(JSON.parse(data));
    }
  }, []);
// 입력되면 저장되는 부분
const clickAddButtonHandler = (event) =>{
    event.preventDefault();
    const newWorking = {
      id: working.length +1,
      work: title,
      content: content,
      isDone: false,
    }
    const updateWorking = [...working, newWorking];
    setworking(updateWorking);
    localStorage.setItem('todokey', JSON.stringify(updateWorking));
    setTitle('');
    setContent('');
  };

이 상태에서 로그를 살펴보면

원하는 값이 잘 들어오는 것을 확인할 수 있었다.

경고문 React Hook useEffect has a missing dependency:Either include it or remove the dependency array.

버튼동작 수정

페이지를 새로고침 하면, 완료/삭제하기 동작이 저장되지 않아 모두 Working구간에 존재한다.
이벤트가 동작한 것 상태 그대로 나오게 만들어 줘야한다.

setworking(updateWokrings);
localStorage.setItem('todokey', JSON.stringify([...updateWokrings]));

해당 함수를 버튼 동작에 추가해서 데이터의 정보를 변경하게 만들어주었다.
렌더링이 되게끔 setworking을 사용해주면 데이터와 내용이 일치하게 만들어준다.

수정하기 버튼 추가

입력 받을 수 있는 컴포넌트를 새로 추가해주고 내부에서 값을 변경할 수 있게 State를 넣어주었다.
또한 수정 버튼이 눌러지면 기존에 있는 요소들을 숨겨주고 입력받을 수 있는 공간이 나타나게 만들어준다.
UpdateContent컴포넌트를 새로 생성해서 동작시키면 작동은 잘된다. 하지만 set을 해버리면 Too many re-renders 오류가 발생하기에 새로운 값이 저장되었을 때 어떻게 렌더링을 하게 만들지 고민이 필요하다.

Too many re-renders
수정완료 버튼에 함수를 2개 실행하는 것으로 계속 set을 하여 렌더링 하는 것을 방지했다.
하지만 set을 추가해도 렌더링이 되지 않아서 방법을 찾아봐야 한다.

리액트의 렌더링조건

1. state 변경이 있을 때
2. 부모 컴포넌트가 렌더링 될 때
3. 새로운 props가 들어올 때
4. shouldComponentUpdate에서 true가 반환될 때
5. forceUpdate가 실행될 때 -> 강제 렌더링

수정하기에서 데이터만 저장되게 만들면 되는데 하위 컴포넌트에 있던 값을 어떻게 set할지 고민중이다.