🍒 Chae-ri Dev 🍒

React Context API란?컴포넌트에 props를 직접 전달하지 않고 여러 컴포넌트 간에 전역으로 상태를 쉽게 공유하고 관리할 수 있게 해준다.일반적으로 React에서는 데이터를 위에서 아래로(부모 -> 자식) props를 통해 전달하는데, 실제로 개발을 하다보면 목표 컴포넌트까지 props를 전달해주기 위해 여러 컴포넌트를 통과해야 하는 props drilling 문제가 발생하게 된다. 이 문제를 해결하기 위해 전역으로 관리할 수 있게 React에서 만든 것이 바로 Context API이다.주로 UI 테마(라이트 모드, 다크 모드 등), 언어 설정, 인증된 사용자 등 전역으로 사용될 수 있는 상태를 공유할 때 사용된다. 그렇다면 전역 상태 관리를 할 때 사용하면 되는가?그건 아니다.전역으로 관리..

Next.js 릴리스 역사를 통틀어 가장 큰 변화가 있는 릴리스.특히, 서버 사이드 렌더링의 구조에 많은 변화가 있는 리액트 18을 채택했으며, next.js의 큰 약점이었던 레이아웃 지원을 본격적으로 지원 시작.바벨을 대체할 러스트 기반 SWC를 뒤이어 웹팩을 대체할 Turbopack까지 출시. # app 디렉터리의 등장Next.js의 아쉬운 점 => 레이아웃의 존재 공통 헤더와 공통 사이드바가 대부분의 페이지에 필요하다고 해보자.react-router-dom을 사용한 예시import {Routes, Route, Outlet, Link} from 'react-router-dom'export default function App() { return ( Routes 외부의 공통 영역 ..

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

예시 위처럼 이번에 참여한 프로젝트에서 만든 애니메이션바에 대해 포스팅을 해보겠습니다. 애니메이션바는 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 스타일 : 각 스테이지(구간)..