상태관리React의 상태 관리는 컴포넌트가 데이터를 저장하고, 그 데이터를 기반으로 UI를 업데이트하는 핵심 기능임React에서는 상태(state)를 사용하여 컴포넌트가 가진 형재 데이터를 저장하고, 이 데이터가 변경될 때 자동으로 UI를 다시 렌더링하여 반영하게 함 React 상태 관리의 역할React의 상태 관리는 UI의 일관성을 유지하고, 데이터가 변경될 때마다 해당 부분만 다시 렌더링하여 성능을 최적화하는 것을 목표로 함각 컴포넌트는 독립적인 상태를 가질 수 있으며, 부모와 자식 컴포넌트 간에 데이터를 props를 통해 전달하면서 전체 UI를 구성할 수 있음 useStateReact에서 함수형 컴포넌트의 상태를 관리할 때 useState 훅을 사용useState는 상태 변수와 상태 업데이트 함수를..

State (상태)특정 React 컴포넌트 안에서 사용하는 데이터 (변경가능)class MyComponent extends Component { state = {상태이름:상태값} componentMethod = () => { this.setState({상태이름 :새로운 상태값}) } render(){ return (표시할 요소, 컴포넌트) }}function MyComponent(){ const[상태, 상태변경함수] = useState(상태값) const componentMethod = () => { 상태변경함수(새로운 상태값) } return(표시할 요소, 컴포넌트)} 상태 변경 함수를 사용하지 않으면, React는 상태 변경을 감지하지 못한다  쓸대없이 화면 업데이..

자바스크립트에서 for-in과 for-of는 반복문을 사용할 때 쓰이는 두 가지 방식이다둘다 배열이나 객체를 순회하지만, 순회 대상이나 동작 방식에 차이가 있다 for-in 반복문객체의 열거 가능한 속성(property) 또는 배열의 인덱스를 반복 특징객체의 속성 이름(key)을 반복배열에서는 배열의 인덱스를 반복. 즉, 배열의 요소가 아니라 그 인덱스를 반환 함상속된 열거 가능한 속성도 포함될 수 있음// 객체에서 사용const obj = { a: 1, b: 2, c: 3 };for (let key in obj) { console.log(key); // a, b, c (객체의 속성 이름)}// 배열에서 사용const arr = [10, 20, 30];for (let index in arr) { ..

Redux Toolkit이란Redux의 공식 도구 모음, 복잡한 설정과 반복적인 코드를 줄이고 Redux를 더 쉽게 사용할 수 있도록 만들어 짐직관적인 API, 코드 간소화, 미들웨어 기본 제공 등의 장점을 제공하며,특히 아래와 같은 함수를 제공함createSlice (Action, Reducer)configureStore (Store)createAsyncThunk 설치npm install @reduxjs/toolkit react-redux(공식 문서에서도 RTK를 사용할 것을 권장) Redux와 차이점설정 간소화 : Redux는 기본 설정 시 store, reducer, 미들웨어 등 각각 설정해야함. Redux Toolkit은 이를 단일 파일로 간단하게 구성할 수 있음코드 축소 : Redux는 액션, ..

Redux란JavaScript 애플리케이션(특히 React)에서 전역 상태 관리를 할 수 있게 해주는 라이브러리Redux를 사용하면 전역 상태를 '스토어'라는 중앙 데이터 저장소에 관리하며, 컴포넌트 간 상태 공유 및 상태 업데이트가 간편해진다설치npm install redux react-redux 구성 요소를 다 만들었다면 React-Redux에서 제공하는 기능을 사용App과 전역 상태 저장소 연결 - 상태 저장소에서 상태 꺼내서 사용 - useSelector()dispatch함수 만들어서 사용 - useDispatch() Redux의 데이터 흐름 (flux패턴)Redux는 Flux패턴을 기반으로 동작이 패턴은 단방향 데이터 흐름을 가정하여, 데이터의 변경이 한 방향으로만 흐르도록 하여 상태를 예측 가..

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