코딩핑

위와 같은 warning이 뜨는 이유? styled-components를 사용할 때, DOM요소가 이해하지 못하는 사용자 정의 props가 DOM 요소에 전달되면서react가 경고 메세지를 보낸 것이다  ex) props를 전달 받아 스타일을 다르게 적용해주려고 할 때 다음과 같이 하면 one, two라는 사용자 정의 props에 의해 경고 발생const Wrapper = styled.div` display:flex; width:100dvw; height:100dvh; flex-direction: column; justify-content: center; align-items: center;`;const Wing = styled.div` height: 100px; wi..

결과부터 보여주면 내가 하고 싶었던 것은 다음과 같이 스크롤로 내리다가 intro 화면이 끝나면 메뉴바가 보이는거였다XD  useEffect 와 getBoundingClientReact를 사용해서 구현할 수 있었다 개념useEffect? 리액트 컴포넌트는 대부분 순수함수이다. 순수함수는 동일한 인수에 대해 리턴값이 동일하고 외부의 상태를 변경하지 않아컴포넌트 재사용성이 증가하고 예측 및 테스트를 쉽게 할 수 있다.이에 반대되는 함수는 side effect를 수행한다고 할 수 있다. 즉, 함수 내의 구현 내용이 함수 외부에 영향을 끼치는 경우이다.ex) 서버에 api로 데이터 요청, 브라우저 api와 상호작용, 타이밍 함수 등 useEffect는 이러한 side effect를 처리하는 훅이다! 이를 통해 ..