Context API전역적인 상태를 관리하고, 컴포넌트 간 데이터를 쉽게 공유할 수 있도록 도와주는 API일반적으로 컴포넌트 트리의 깊은 곳까지 props를 전달해야 하는 상황이 발생할 때 props drilling을 피하기 위해 사용함Context API는 React 내장 기능이라 소규모 상태 공유에 적합다만, 대규모 애플리케이션에서 복잡한 상태를 관리하려면 Redux나 Recoil 같은 외부 상태 관리 라이브러리와 함께 사용하는 것이 더 효과적일 수 있다 Context API 구성요소Context 객체 : React.createContext()를 사용하여 Context 객체를 생성Provider : 이 컴포넌트를 사용하여 Context의 값을 제공하며, 하위 컴포넌트들이 이 값을 사용할 수 있도록 함..

React 전역 상태관리의 장점애플리케이션의 복잡도가 증가할 때, 특히 여러 컴포넌트 간에 공통 데이터를 공유해야 하는 경웨 더 분명해짐전역 상태 관리를 사용하면 데이터를 효율적으로 관리하고 유지보수하기 쉽게 만들 수 있다 상태 공유가 쉬워짐사용하면 애플리케이션의 여러 컴포넌트가 공통된 데이터를 쉽게 공유할 수 있음컴포넌트 계층 구조에 상관없이 필요한 곳에서 상태에 접근하고 업데이트할 수 있으므로, 데이터를 자식 컴포넌트로 계속 전달하는 props drilling을 피할 수 있음상태 중앙 집중화사용하면 애플리케이션 전체 상태를 한 곳에서 관리할 수 있음. 이를 통해 상태의 변화를 추적하고 관리하는 것이 쉬워짐상태가 중앙에서 관리되므로 애플리케이션의 동작을 예측 가능하게 만들어 주며, 디버깅 및 유지보수가..

Tailwind CSS 설치 & 사용방법Tailwind유틸리티-퍼스트(Utility-First) 접근 방식을 사용하는 CSS 프레임워크스타일을 빠르게 적용할 수 있는 다양한 작은 유틸리티 클래스들을 제공하여, 커스텀 CSS를 작성하지 않고도 쉽게 원하는 디자인을 구현할 수 있으며 Tailwind CSS는 컴포넌트 기반의 스타일링을 쉽게 만들고 유지할 수 있도록 도와준다 Utility-First란스타일을 작은 단위의 유틸리티 클래스(예: text-center, mt-4, bg-blue-500 등)로 구성하는 스타일링 접근 방식이 방식은 CSS의 반복적인 코드 작성을 줄이고, 유지보수와 개발 속도를 높이는 데 도움을 준다Tailwind CSS는 이러한 유틸리티 클래스들을 활용하여 빠르고 직관적인 스타일링을 ..

Styled-ComponentsReact와 같은 JavaScript 프레임워크에서 CSS를 직접 JavaScript 코드 안에 작성할 수 있게 해주는 CSS-in-JS 라이브러리이를 통해 컴포넌트별로 스타일을 관리하고, JavaScript의 모든 기능을 활용해 동적 스타일링이 가능장점컴포넌트 기반: 각 컴포넌트마다 스타일을 독립적으로 작성할 수 있어 유지보수가 쉬움동적 스타일링: props를 통해 조건부 스타일링이 가능하여 유연한 디자인 구현이 가능전역 클래스 이름 충돌 방지: 자동으로 고유한 클래스 이름을 생성해주어 스타일 충돌을 피할 수 있음단점런타임 성능 이슈: 스타일이 런타임에 적용되기 때문에 대규모 애플리케이션에서는 성능 이슈가 발생할 수 있음빌드 사이즈 증가: 모든 스타일이 JavaScript..

SCSS와 SASSCSS코드 중첩, 변수화, 재사용등 여러기능을 제공 SASSSyntactically Awesome Style Sheets - 문법적으로 짱멋진 스타일 시트기존 CSS의 단점을 보완하고 효율성을 높이기 위해서 만들어진 문법.button background: blue a: hover background: gray들여쓰기 사용 SCSSSassy CSS - 깔삼한 CSS.button { background: blue; a: hover { background: gray; }}중괄호 사용 -> 기존 CSS와 더 비슷해서 가독성이 좋음 사용법터미널 창에서 설치 - npm install sassSCSS 화장자 파일 쓰기 - App.scss index.scss 장점코드의 재사용성이 ..

JSX (JavaScript XML)JavsScript를 확장한 문법JavaScirpt + XML/HTML을 합친 것이라고 볼 수 있음React에서는 JSX를 이용하여 화면에 UI를 나타냄JSX를 사용하면 하나의 파일에 HTML구조와 JS를 함께 사용할 수 있다기존에는 .html 파일과 .js 파일로 구분하여 작성해 왔음브라우저에서 실행하기 전 Babel을 사용하여 일반 JS형식의 코드로 변환 됨// JSX 문법function App() { return ( 안녕하세요 );}// JSX를 사용하지 않는 코드function App() { return React.createElement("h1", null, "안녕하세요");}createElement() : JSX코드를 JS 코드로 변환하는 역할을 해주는 함..