[항해99 3주차] - react 개인 과제 (2)

 

 

위 사진에서

List.js와 Todo.js 컴포넌트를 파헤쳐보자

 

 

 

 

 

 

 

위와 같이

완료버튼을 누를시

완료!버튼을 취소!버튼으로 변경한 후 

밑 줄로 내리는 작업이다.

 

 

 

List.js 파일안에서

  const setBtn = (todo) => {

    let new_arr = [...arr]

    let new_obj = new_arr.map(user => {
        if ( user.key === todo.key ) {
          if (user.isDone === '완료!') {
            return (
              {...user, isDone : '취소!'}
            )
          } else {
            return (
              {...user, isDone : '완료!'}
            )
          }
        } else {
          return {...user}
        }
      })

    setArr(new_obj);
  }

 

 

todo파라미터를 받아온 후 

 

(이 파라미터는 하위컴포넌트에서 가져온건데

그 로직에 대해서는 아래에서 설명하겠다.)

 

todo는 클릭한 객체를 뜻하고

이 함수는

완료!버튼을 취소!버튼으로 바꾸는 토글

기능을 한다.

 

 

  const working_filter = arr.filter((todo) => { return todo.isDone === '완료!' }).map((todo, i) => {
    return (<Todo setBtn={setBtn} todo={todo} setArr={setArr} arr={arr} key={i} i={i}/>)
  });

 const done_filter = arr.filter((todo) => { return todo.isDone === '취소!' }).map((todo, i) => {
    return (<Todo setBtn={setBtn} todo={todo} setArr={setArr} arr={arr} key={i} i={i}/>)
  })

 

 

working_filter 변수는

상위컴포넌트에서 받아온 arr 배열을

그대로 받아와 filter함수를 이용해

key인 isDone의 값이 완료!인 것들만 반환해주고

그 반환해준 배열을 map함수로 돌려 

해당 배열의 요소들만 Todo컴포넌트로 만들어준 후 리턴한다.

 

done_filter는 

취소!인것들만 리턴해준다.

 

<div className="list-box">
      <div className="list-1">
        <span>
          I'm working hard 🔥🔥🔥
        </span>
        <div className="map-list">
          {working_filter}
        </div>
      </div>
      <div className="list-2">
        <span>
        I'm done with my work 🎉🎉🎉
        </span>
        <div className="map-list">
          {done_filter}
        </div>
      </div>
    </div>

이렇게 원하는 곳에 원하는 배열들을 jsx문법으로

렌더링 해준다.

 

 

 

 

 

 

 

Todo 컴포넌트를 보면 

 

Todo.js

function Todo({todo, setBtn, setArr, arr, i}) {

  
  return (

      <div className="todo-box">
      <div className="div-span">
        <span className="title-span">{todo.title}</span>
        <span className="content-span">{todo.content}</span>
        <span style={{fontSize:"20px"}}>{todo.key}</span>
      </div>
      <div className="div-button">
        <button onClick={ (e) => {
          const todo_box = e.target.parentElement.parentElement
          todo_box.remove()
          console.log(arr)

          // let arr_1 = [...arr]
          // arr_1.splice(i, 1)
          // setArr(arr_1)
          // console.log(arr_1)
          // console.log(todo.key)
        }
        }>삭제하기</button>
        <button onClick={() => {
          setBtn(todo);
        }}>{todo.isDone}</button>
      </div>
    </div>
  );
}

export default Todo;

 

 

맵함수를 돌린 Todo 컴포넌트에서

map함수의 인자인 

처음말한 todo, i 등을 가져올 수 있고

todo.isDone의 값을 가진 버튼을 클릭하면

상위컴포넌트에서 선언한 함수를 실행하는데

여기서 map함수로 사용된 인자인 todo를 다시 상위컴포넌트에 파라미터로 보내준다.

 

 

 

 

 

 

도식화하면 이런느낌...?

 

 

 

이렇게 개인과제가 완성됐는데

리팩토링이 필수라고 생각되는

코드들이기 때문에

찝찝한 기분으로 마쳤다.

 

 

다음주에 새로운과제가 또 시작되겠지만....

그 땐 이런 찝찝한기분 안느끼게

처음부터 구조를 잘짜야될 것 같다.