웹 개발자 도전기

styled-components 는 CSS를 JavaScript 파일 안에서 직접 작성할 수 있게 해주는 도구 입니다.CSS-in-JS 라고 불리며 컴포넌트 마다 스타일을 독립적으로 관리할 수 있어 리액트 프로젝트에서 많이 사용합니다. 설치 방법npm npm i styled-componentsyarn yarn add styled-components styled-components를 사용하는 이유컴포넌트와 스타일을 한 곳에서 관리할 수 있습니다. 별도로 CSS 파일을 만들 필요가 없습니다.CSS 클래스 충돌을 방지 합니다. 각 스타일은 컴포넌트에 고유하게 적용되기 때문에 다른 곳에서 사용 중인 클래스 이름과 겹칠 일이 없습니다.동적 스타일링이 쉬워진다. 컴포넌트에 전달되는 props 에 따라 스타일을 쉽게..

useContext useContext는 리액트 내장 훅으로 컴포넌트 트리 전체에서 데이터를 쉽게 전달할 수 있게 해줍니다.일반적으로 로그인한 사용자 정보나 테마 같은 전역 상태를 관리할 때 사용합니다.useContext를 사용하면 컴포넌트에서 매번 props로 데이터를 전달할 필요 없이 원하는 곳에서 바로 사용할 수 있습니다. 장점리액트 기본 기능이라 별도 패키지가 필요 없다.설정이 간단하고 중소형 프로젝트에서 전역 상태 관리를 쉽게 할 수 있다.단점프로젝트가 커지면 useContext 만으로는 상태 관리를 복잡하게 만들 수 있다.useContext 자체는 전역 상태를 관리하는 기능이지 상태 업데이트에 대한 세밀한 제어나 효율적인 리렌더링 처리는 어렵다.    동작 방식User.jsx 에서 UserCo..

React Router는 리액트에서 네이게이션을 관리하는 라이브러리 입니다.다양한 경로를 정의하고 그 경로에 따라 컴포넌트를 렌더링할 수 있게 해줍니다. 설치 방법npm 사용npm i react-router-domyarn 사용yarn add react-router-dom React Router의 기본 개념BrowserRouter : 애플리케이션 전체를 감싸는 컴포넌트로 HTML5의 History API를 사용하여 URL을 관리합니다. 이 컴포넌트 안에서 라우팅이 이루어집니다.Routes : 여러 개의 Route를 감싸는 컴포넌트 입니다. 각 Route를 그룹화 하고 관리합니다.Route : 각 URL 경로에 해당하는 컴포넌트를 매핑할 때 사용합니다. 특정 경로에 들어가면 지정된 컴포넌트가 렌더링 됩니다...