[개발 공부 30일차] Error 직면과 문제해결 | useState, useEffect

 

영차영차 과제를 해나가는 중이다. 최대한 깨있는 상태를 유지하려고 하는데, 계속 밤새우고 조금 자니 오늘은 집중도 안 되고 뇌에도 정보가 잘 입력이 안 되는 느낌이 들어 밤에 조금 자고 지금 글 적는 중이다. 가능한 이번 주말에는 좀 자야겠다,,

 

 

< 목차 >

1. Error 직면과 문제해결
2. 튜터님께서 알려주신 useState와 useEffect

3. 금일 소감

 

 

1. Error 직면과 문제해결

fake API dummy data를 잘 가져왔다

 

 

어제까지 해서 Fake API 더미 데이터를 연결하고 map 함수로 돌려서 반환하는 것까지 완료했다. 그리고 각 멤버별로 어떤 카드가 있는지 Filter를 통해 걸러서 보여주는 기능도 완료하였다. 그런데 input에 내용을 넣으면 그게 출력되어야 하는데 이 부분에서 막혀버렸다. 이제 과제 중반 부분인데 하나하나 할 때마다 막혀서 진도 나가는 속도가 더뎌졌다.

 

 

[Error 내용] uuid는 반복객체가 아니라는 메시지

 

UUID는 반복객체가 아님

새로운 팬레터를 등록하면, 더미 데이터에 있는 id에 +1씩 추가해서 id 만든 것을 붙여서 각각의 고유 id를 만들어주려고 했었다. 근데 필수 기능 중 하나로 'uuid 사용'이라 나와있어서 uuid를 연결하고 똑같이  id에 +1씩 추가하니, 위처럼 uuid가 반복객체 아니라는 에러 메시지가 떴다. 무슨 말인지는 알겠는데 어떻게 해결해야 할지 모르겠어서 구글링 꽤 하다가 튜터님께 갔다.

 

 

 

새로운 팬레터 양식을 Dummy data와 동일하게

결론적으로는 위 사진의 왼쪽, 새로운 팬레터의 양식을 기존에 사용해오던 Dummy data의 key:value와 동일하게 맞춰주는 작업이 필요했다. 나도 저거 안 맞는 거 좀 이상하게 생각 들긴 했는데 이번 기회에 이렇게 맞춰줘야 한다는 걸 정확하게 알 수 있어서 좋았다.

 

이후의 과제 진도도 팍팍 나가야 하는데 오늘 새벽에 잠을 좀 덜 자더라도 진짜 거의 다 끝내기는 해야겠다..

 

 

 

2. 튜터님께서 알려주신 useState와 useEffect

튜터님께서 Live Share로 작성해주신 코드!

 

 

오늘 튜터님께서 useState와 useEffect에 대해서 정말 자세하게 1:1로 알려주셨다. 뭔가 나조차도 이 Hook들을 애매하게 알고 있다는 걸 알아서 튜터님께 이해가 안 되는 부분과 잘 모르겠는 부분은 솔직하게 말씀드리고 설명을 들었다. 너무 자자세하고 친절하게 알려주셔서 잠을 별로 못자서 집중력이 부족한 상황임에도 잘 이해가 되었다.

 

 

내용을 정리하자면,

useEffect로 화면을 그려주는 방법은 3가지가 있다.

 

(1) 최초 렌더링 시에만 콜백함수가 호출됨

// TODO: 1번째
    // (1) 최초 렌더링 시에만 호출됨(callback 함수가)
    useEffect(() => {
        console.log(1)
    }, []);

 

위와 같이 의존성 배열을 의미하는 [ ] 안에 아무 값도 넣지 않을 경우, 최초 렌더링 시에만 작동한다.

 

 

(2) 최초 렌더링할 때 + [ ] 안에 들어있는 의존성 배열 값이 변경될 때 호출됨

// TODO: 2번째
    //(1) 최초 렌더링 시 호출
    //(2) letters가 변경될 때
    useEffect(function () {
        console.log(2)
        // setLetters(~~~~); // 무한 렌더링
        // setTest(true);
        // setTest(prev => !prev);
        setTest((prev) => !prev);
    }, [letters]);

    useEffect(() => {
        console.log(test);
    }, [test])

 

위와 같이 [ ] 안에 의존성 배열 값으로 useState의 state 값을 지정해주는 경우, [ ] 안에 든 값이 변경될 때마다 Re-rendering 해준다.

 

 

(3) [잘 안 쓰는 case! 참고용] 최초 렌더링할 때 + 모든 코드 내에 어떠한 State가 변경되더라도 늘 호출됨

// TODO: 3번째
    // (1) 최초 렌더링 시 호출
    // (2) 그 이후 항상, 어떤 state가 변경되더라도 호출
    // (3) 사실상 없는 것과 동일
    useEffect(() => {
        console.log(3)
    })
    console.log(3)

 

위 Case는 늘 호출을 해줘서 맨 아래 코드의 console.log(3)과 같이 항상 호출이 된다. 따라서 위와 같이 의존성 배열 없이 useEffect를 사용하는 거라면 안 쓰는 것과 동일한 효과를 불러오기에 이 경우는 거의 사용하지 않는다고 한다. 그냥 이런 경우도 있다고 참고 정도만 하자.

 

 

 

3. 금일 소감

과제 얼른 끝내야 해서 오늘은 좀 적게 적을 것 같았는데 작성하고 보니 분량은 나쁘지 않은 것 같다. 평일 내에는 다 끝내야 주말에 코드 리팩토링 할 수 있어서 오늘 새벽 내로 최대한 해야 한다. 내일까지 개인과제 내용과 에러사항 적으면 개인과제 관련 포스팅은 얼추 마무리될 것 같다. 그럼 금요일도 파이팅!!!