[React] 새로 알게된거

filter함수 쓰다 에러남

궁금한거

이건 된다.

    const newDiaryList = data.filter((it) => it.id !== targetId);

이건 안된다.

    const newDiaryList = data.filter((it) => {it.id !== targetId});

이건 에러

Compiled with problems:X

ERROR

[eslint] 
src/App.js
  Line 58:7:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.	

원인 추측

.filter(()=>{})이렇게 쓰면 에러나고,
.filter(()=>())이렇게 쓰면 괜찮다.

결론

더 알아보니 .filter(()=>{ return ? })
중괄호를 쓰려면 리턴문을 함께 써야한다고 한다.

T/F toggle로 바꿀 때

  const [isEdit, setIsEdit] = useState(false);
  const toggleIsEdit = () => setIsEdit(!isEdit);

//사용할  때
  <button onClick={toggleIsEdit}>수정 취소</button>

전에는 ㅎㅎㅎㅎ..

  const [isEdit, setIsEdit] = useState(false);
  setIsEdit(true)//이런식으로 바꿨었다.

이거보단 첫번째 코드가 더 좋은 코드인듯.. 근데 왜좋은진 모르겠다.
아 알겠다 가독성이 좋음!!!!

useState() 비동기처리

setData()가 비동기적으로 동작해서, data변수 사용 시 어려운 점이 있었다.
setData()의 인자로 연산함수를 넣어서 처리하라는데, 그게 이해가 안되다가
이 함수 보고 이해함..
다음과 같이 하면된다. 진짜 말 그대로 setData안에서 연산하고 바로 set되게 하면됨.

 const [data, setData] = useState([]);

 const onEdit = (targetId, newContent) => {
    setData(
      data.map((it) =>
        it.id === targetId ? { ...it, content: newContent } : it
      )
    );
  };

컴포넌트가 렌더링 될 때

본인이 가진 state에 변화가 생겼을 때
부모 컴포넌트가 리랜더링이 일어날때
자신이 받은 prop이 변경되는 경우