Today I Learned 2023.03.01. [React 프로젝트 3]

Dongchan Alex Kim·2023년 3월 1일
0

Today I Learned

목록 보기
12/31
post-thumbnail

문제상황

const DeleteButton = ({ color, backgroundColor, item}) => {
    const { todo, setTodo, title, setTitle, content, setContent} = useContext(TodoContext);
    const clickRemoveButtonHandler = (id) => {
        const newTodo = todo.filter((todo) => todo.id !== id)
        setTodo(newTodo)
    }
    return (
        <div>
            <button style={{color,backgroundColor}} className= 'button-2'
                 onClick={clickRemoveButtonHandler(item.id)}>
                <FaTrash/>
            </button>
        </div>
    )
}

export default DeleteButton

이 부분에서 갑자기 console.log가 엄청 찍히는 것이었다.
아니 이게 뭐람? 싶어서
error 메세지를 보니,
1. uncaught 어쩌구 하면서 id 값을 찾질 못하고 있고,
2. 미친 듯 콘솔로그를 찍는게 문제였다.

해결

 <button style={{color,backgroundColor}} className= 'button-2'
                 onClick={()=>{clickRemoveButtonHandler(item.id)}}>
                <FaTrash/>
            </button>

사실 저번에도 같은 문제로.... TIL을 쓴적이 있긴 했는데,
이번에 또 이렇다니..
크크 역시 사람은 변하질 않아..

  • onClick=(...) 안에는 함수명을 쓰게 되면, 함수를 할당만 할 뿐 실행되지 않는다.
  • 반대로 안에 함수()를 쓰게된다면, 버튼이 생성되면서 동시에 함수가 실행되어버리기 때문에, 지속적인 콘솔로그 값이 찍히는 것이었다.

-> 위의 사례와 같이 clickRemoveButtonHandler와 같은 경우 item.id값을 인자로 받아와야하기 때문에, 어쩔 수 없이 ()를 써야하기 때문에, 이때는 화살표함수 안에 함수를 할당해버리면 해결!
()=>{clickRemoveButtonHandler(item.id)}


문제상황

function reducer(state, action){
  // if(action.type == 'substract'){
  //   return { count : state.count-1 }
  // }
  // if(action.type == 'add'){
  //   return { count : state.count+1 }
  // }

  switch (action.type){
    case "add" :
      return state.count + 1
    case "substract" :
      return state.count - 1
  }
}

버튼 구동 자체가 되질 않았다.
콘솔로그 값을 찍어보면, count값 자체를 가져오질 못해서 계속 오류가 났다.

해결

switch (action.type){
    case "add" :
      return {count : state.count + 1}
    case "substract" :
      return {count : state.count - 1}
  }
}
  • reducer 함수는 '동일한 인자가 주어졌을 때 항상 동일한 결과를 반환하며 외부의 상태를 변경하지 않는' 순수 함수이다.

  • 따라서 기존의 state를 변경(modify), 추가(add), 덮어쓰지(overwrite) 않고,
    기존의 state를 새로운 state로 대체(replace)한다.

profile
Disciplined, Be systemic

0개의 댓글