221127 props로 함수를 내려주는 이유는 뭘까?

props는 부모컴포넌트에서 자식컴포넌트로 전달하는 값이다.

규칙중에 자식컴포넌트는 부모컴포넌트로 props를 전달하지 못하는 것이 있다.

 

그럼 함수를 내려보면 어떨까?

함수에 useState의 변경하는 함수를 넣어두고.

const removeWorkHandler = (id) => {
    //해당 id값만 제거
    const newWorkList = works.filter((work) => work.id !== id);
    //state 재할당
    setWorks(newWorkList);
  };

에를 들면 위와 같은 함수를 내리면,

자식컴포넌트에 해당 함수를 내리고 그 함수를 자식객체에서 어떠한 방법으로 사용했을 때

setWorks를 사용해 부모컴포넌트에서 정의된 State를 변경할 수 있다.

 

규칙을 어긋나는 리액트만의 꼼수같은 느낌이든다.

 

그리고 오늘 내가 코딩을 하며 문제점이 생긴 것이 있다.

//isDone 변경하기 버튼핸들러
  const changeWorkHandler = () => {
    if (works.isDone === true) {
      works.isDone = false;
    } else {
      works.isDone = true;
      console.log(works.isDone);
    }
  };

works라는 State값의 isDone을 false에서 true로 바꾸는 것이다.

자식객체에서 이 함수가 작동하여 isDone값이 바뀌면, 특정 컴포넌트에서 사라지고, 다른 컴포넌트에 생겨야하는데

 

뭔가 생각처럼 되지 않았다.

일단 State값은 변하지만, 렌더링되지 않는 문제가 있다.

그래서 내일 저 코드 아래에 setWorks를 사용하여 State값을 선언하여 렌더링 되는 방식을 써봐야겠다.

 

{works.map((work) => {
            if (work.isDone === false) {
              return (
                <Working
                  handleRemove={removeWorkHandler}
                  handleChange={changeWorkHandler}
                  work={work}
                  key={work.id}
                ></Working>
              );
            }

여기서 work.isDone === false인것을 filter하고 그 후 map을 사용하여 return을 해보자!!!

내일하는걸로!