🍒 Chae-ri Dev 🍒

프로젝트 태스크를 진행하다가 children 타입을 React.ReactElement; 로 두고 태스크 완성한 걸 PR에 올려두었다. 여기서 받은 다른 팀원 분의 질문요기 ReactNode가 아니라 ReactElement로 타입 좁혀놓으신 이유가 있을까용? 이 질문을 보면서 ReactNode와 ReactElement의 차이를 제대로 설명을 할 수 있어야겠다고 생각하여 공부하면서 이 포스트에 정리해보겠다. children의 타입으로 사용하는 타입에는 크게 ReactNode와 ReactElement가 있다.  ReactNode-> 클래스형 컴포넌트의 리턴값에 해당ReactNode는 JSX에서 children으로 전달될 수 있는 모든 타입을 가질 수 있다.string, number, boolean, null,..

recoil로 상태 관리를 했는데 userState가 바뀌면 안되는데 자꾸 상태 데이터가 날라가는 사태가 발생…로직 문제인 줄 알았는데 알고 보니 "a 태그" 때문이었던 것덕분에 a 태그와 Link 태그의 차이점을 크게 알았다.- 페이지를 전환할 때 a 태그의 href 속성을 사용하여, 새로운 페이지에서 'userState' 값을 초기화한다.- 이는 페이지 이동 시 새로운 컴포넌트가 마운트되고 초기화되기 때문에 발생- 페이지를 새로 불러오지 않고 (컴포넌트가 마운트되는 대신) 라우터가 컴포넌트를 변경하고 상태를 유지한다.- 페이지 주소만 변경하여 상태는 초기화되지 않는다메모메모…

예시 위처럼 이번에 참여한 프로젝트에서 만든 애니메이션바에 대해 포스팅을 해보겠습니다. 애니메이션바는 keyframe을 이용해서 만듭니다! 여기서 keyframe이란? CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 하는 속성 0~100% 형태 @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } from-to 형태 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } keyframe을 사용하기 위해서는 다음과 같이 3가지가 필요합니다. animation-name : 사용자가 직접 지정한 이름 stage : from - to 로 0~100% 의 구간 CSS 스타일 : 각 스테이지(구간)..