Section3 / Unit3 : React Custom Component 과제

styled-components와 useRef를 활용해 과제해보는 시간이었다

과제를 하다가 알게된 개념을 정리해보자

1. setIsOn(!isOn) 보다 setIsOn((prev)=>!prev)가 더 안정적이다.
2. e.sotpPropagation()

 

 

 

우선 useState를 사용할 때 기본 boolean값을 바꿀때

  

    
    
    
    
  
// 예시
const [isOn, setIsOn] = useState(false);
// true로 바꾸고 싶을 때
setIsOn(!isOn) // 이런 방식으로 많이 쓰는 데
setIsOn((prev)=>!prev) // 이 방식으로 쓰는 게 더 안정적이라고 한다

setIsOn(!isOn) 보다 setIsOn((prev) => !prev) 방식이 더 안정적인 이유

• 예측 가능성이 높다

useState 훅을 사용하면 상태를 업데이트할 때 이전 상태를 어떻게 가져오는지에 대한 기능을 제공한다

 

이전 상태를 가져오는 이유

→ 상태 업데이트가 비동기적으로 이루어질 수 있기 때문

 

상태 업데이트 함수 setIsOn은 비동기적으로 동작할 수 있으므로

→ 여러 번 호출되면 순서가 보장되지 않을 수 있다.

→ setIsOn(!isOn)의 경우 isOn의 값이 업데이트되지 않은 이전 값을 참조할 수 있다.

//예시
//이전 상태가 false이고
// setIsOn(!isOn)이 2번 호출된다고 가정해보자
setIsOn(!isOn)
setIsOn(!isOn) // false일 수 있다

두 번째 호출에서 isOn은 여전히 false일 수 있다.

→ !isOn은 항상 true가 되는 것이 아니라 예상대로 동작하지 않을 수 있음

 

setIsOn((prev) => !prev)는 이전 상태 값을 신뢰할 수 있도록 보장한다.

setIsOn의 인자로 함수를 전달하면 React는 최신 상태를 인자로 전달하고 업데이트를 안전하게 처리한다.

→ 함수 인자 (prev) => !prev는 이전 상태를 받아서 업데이트된 값을 반환

→ 이렇게 함으로써 이전 상태 값을 신뢰할 수 있게 되고,

→ 상태 업데이트가 순서대로 처리되어 예상한 결과를 얻을 수 있음

 

따라서, setIsOn((prev) => !prev)를 사용하는 것이 상태 업데이트의 안정성과 예측 가능성을 높일 수 있다.

 

---

filter를 사용했을 때 2번 째 인자는 써본 적이 없었는데

---

Modal

  

    
    
    
    
  
<ModalContainer>
        <ModalBtn onClick={openModalHandler}>
          {isOpen ? 'Opened!' : 'Open Modal'}
        </ModalBtn>
        {isOpen &&
          <ModalBackdrop onClick={openModalHandler}>
            <ModalView onClick={(e)=>e.stopPropagation()}>
              <div onClick={openModalHandler}>X</div>
              Hello CodeStates
            </ModalView>
          </ModalBackdrop>
        }
</ModalContainer>

<알게된 점>

닫기 버튼을 만들었는데 닫기 버튼이 아니어도 모달 오버레이창 다른 곳을 눌러도 닫혔다

 

부모 요소는 실행되지 않고 자식요소만 실행하고 싶으면 어떡해야 할까?

=> e.stopPropagation()을 사용하면 자식요소만 실행된다!

=> 이벤트 버블링을 막는다

=> 부모 엘리먼트에게 이벤트 전달을 중단해야 할 때 쓰이는 함수

 

preventDefault()와 stopPropagation()의 차이점

• preventDefault()
  • 브라우저 고유의 행동을 막아주는 함수
• stopPropagation()
  • 부모 엘리먼트로의 이벤트 전달을 막아주는 함수

 

참고 https://velog.io/@yiyb0603/JS-e.preventDefault%EC%99%80-e.stopPropagation%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

---

Toggle

토글을 구현할 때 동그라미만 어떻게 움직일까? 찾아봤는데

=> left속성을 사용해야했다.

 

left 속성 사용 시 주의점

• left속성은 position 속성과 함께 사용하여야 하고
• position:static일 땐, left 속성이 무시된다

---

Tag

HTML entities list

HTML로 표현할 수 있는 ASCII 문자 목록

 

x버튼을 구현할 때 &times;를 사용했다 (;도 붙여서 써야함)

 

참고

https://www.freeformatter.com/html-entities.html