React (3) 썸네일형 리스트형 [React] Context 알아보기 리액트는 상태를 공유할 때 Props를 사용합니다.우리가 다크 모드를 적용하려고 한다면,자식 컴포넌트들은 최상위 App 컴포넌트로부터 Props를 전달받을 것입니다.애플리케이션이 고도화될수록 컴포넌트는 무수히 증가합니다.이 때, Props에 변경점이 있다면 하위 컴포넌트를 수정하고 또 수정하고...😵이를 해결할 수 있는 Context를 오늘 알아보겠습니다.🐸 Context리액트 컨텍스트란 전역으로 데이터를 공유할 수 있도록 고안한 방법입니다.컨텍스트를 사용하면 컴포넌트마다 Props를 넘겨주지 않아도 데이터를 사용할 수 있습니다.🐸 Context API// /context/ThemeContext.tsimport { createContext } from 'react';const defaultValue.. [Redux] 개념과 React에서의 활용 Redux는 자바스크립트 애플리케이션의 상태 관리 라이브러리입니다.특히 React와 함께 사용될 때 매우 강력한 기능을 발휘합니다.처음 사용했을 때, 보일러플레이트 코드가 많아 이해하기 힘들어 글을 작성해보려고 합니다.Redux의 핵심 개념부터 먼저 알아보겠습니다.Store애플리케이션의 전체 상태를 보관하는 중앙 저장소입니다.한 애플리케이션에는 하나의 스토어만 존재합니다.상태는 읽기 전용이며, 직접 수정할 수 없습니다. Action상태 변경을 위한 명령입니다.반드시 type이라는 속성을 가져야 합니다. Reducer이전 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다. Redux의 흐름사용자 상호작용 발생액션 객체 생성 및 디스패치리듀서가 이전 상태와 액션을 처리새로운 상태가 스토어에 저장UI.. [React] 리액트의 useState useState는 리액트에서 가장 기본적이면서도 강력한 Hook입니다.이번 글에서는 리액트의 useState에 대해서 살펴보도록 하겠습니다.useStateuseState는 리액트의 Hook 중 하나로, 컴포넌트에서 상태를 관리할 수 있게 해줍니다.const [count, setCount] = useState(0);위 예시는 useState의 기본 형태입니다.count: 현재 상태값setCount: 상태를 업데이트하는 함수useState(0): 초기값을 0으로 설정이처럼 useState를 사용하면 다양한 타입의 상태관리가 가능하고 여러 상태를 개별적으로 관리할 수 있습니다. setState리액트의 상태 업데이트는 비동기적으로 동작합니다.const [count, setCount] = useState(0);c.. 이전 1 다음