[LIKELION] React useEffect 관련 피드백

해당 글은 인하대학교 멋쟁이사자처럼 11기 FE를 위한 교육 자료로 작성되었습니다.

---

여러분, 주말 잘 보내고 계신가요?

이번주는 React의 핵심 기능 중 하나라고 할 수 있는 React Hooks에 대해서 학습하였습니다. 어떠셨나요? 어렵다고 생각되어도 괜찮아요. 원래 처음 배우는 생소한 개념은 어려운게 당연한거니까요!

금주에 진행한 과제 중에서 useEffect와 관련된 todo list 코드 완성하기 과제에 대해서 간단한 피드백을 드리고자 합니다. 부담 없이 편하게 읽어주세요.

---

1. 비교 연산자? 일치 연산자?

JavaScript 관련 세션에서 학습하셨던 일치 연산자, 기억하시나요? 비교 연산자와 일치 연산자에 대해 간단히 정리하고 넘어갑시다.

[ 비교 연산자? 일치 연산자? ]

• 비교 연산자 : == != 등등.. 여러가지가 존재합니다. 비교 연산자는 타입과 상관 없이 값이 동일하면 참으로 인식합니다.
• 일치 연산자 : === !== 일치 연산자는 엄격하게 같다는 의미를 가집니다. 단순히 값만 비교하는 것이 아닌, 타입까지 동일해야 true로 판단합니다.

[ 왜 일치 연산자를 써야하나요? ]

• 비교 연산자는 타입과 상관 없이 값만 동일하면 true로 판단합니다. 따라서 "5"와 5는 서로 같은 값이라고 판단합니다.
• 바로 이때, 서로를 비교하기 위해서 형변환(타입 변환)이 일어납니다. 이렇게 되면 의도치 않은 결과가 발생할 수 있습니다. 내가 작성한 코드는 오직 숫자 5일때만 true였으면 좋겠는데, 그게 아닌 경우까지 true로 판단하게 되어버립니다.
• 따라서 형변환이 일어나지 않는 일치 연산자의 사용을 권장드립니다.

---

2. useEffect

처음 배우는 개념이라 많이 힘드셨을텐데 코드를 정말 잘 작성해주셨습니다. 다만, 일부 useEffect에서 불필요한 코드가 있는 것 같아, 살짝 조언을 드려볼까 합니다.

해당 코드는 아래와 같습니다.

useEffect(() => {
    // 이곳에 count의 update를 감지하면서 모든 할 일 모두 완료했을 때 
		// "오늘 할 일을 모두 완료하셨네요!"를 출력하는 알림창이 뜨도록 코드를 작성해주세요. 
		// (+ dependency array 에는 어떤 값이 들어가야 할까요?)
    
    if(((todos.filter((todo)=>todo.completed === true).length) === (todos.length)) && (todos.length !== 0)){
      alert("오늘 할 일을 모두 완료하셨네요!");
    }
  }, [count,todos]);

여기서 잠시 count state를 다시 생각해볼까요?

count는 이미 todos에서 completed가 true인 경우만 세어 그 개수를 저장하고 있습니다. 따라서 다시 filter를 활용하여 개수를 구해줄 필요 없이, 기존에 있는 count를 활용하시면 간결하게 코드를 작성할 수 있습니다.

---

이것으로 모든 피드백이 끝이 났습니다. 부족한 피드백임에도 읽어주셔서 감사드리며, 운영진 일동은 항상 아기사자 여러분의 성장을 응원합니다!