Ella 프론트엔드일지

0. 개요 - 리액트는 , , 와 같이 입력을 받을 수 있는 폼 요소들을 제어 컴포넌트와 비제어 컴포넌트로 구분하고 있다. 1. 제어컴포넌트 제어 컴포넌트는 상태(state)와 함께 사용되며, 해당 컴포넌트의 상태에 의해 값이 제어된다. 이 상황은 마치 입력 폼 요소가 이벤트 핸들러 외에 다른 누군가에 의해 변경될 수 없도록 제어하고 있는 것 같다. 이렇게 입력 폼 요소의 value 속성을 지정하여 값을 제어할 수 있는 컴포넌트를 제어 컴포넌트라고 한다. 즉, 사용자의 입력을 받는 컴포넌트에 event 객체를 이용해 setState()로 값을 저장하는 방식을 제어 컴포넌트 방식이라 한다. => 제어 컴포넌트는 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화된다. export default funct..

0. Redux 등장배경 - MVC 패턴(양방향 데이터 흐름)이 주류였지만, 양방향 데이터 흐름은 복잡하고 데이터 흐름을 판단하기 불편했다. 이러한 해결방법으로 단방향 데이터 흐름인 Redux 가 등장했다. 🔸MVC 패턴(양방향 데이터 흐름) - 어떤 action 이 발생하면 데이터 상태가 변경되고 그에 따라 디스플레이를 변경하는데 상태가 변경되었다는 정보를 View와 Model이 서로 양방향으로 주고 받는 형태이다. 1) Model : 어플리케이션의 데이터를 관리해주는 부분 2) View : 어플리케이션이 사용자에게 어떻게 보여지는지에 대한 관리 3) Controller : Model 의 자료와 View의 인터렉션을 총괄하는 어플리케이션 로직 그러나 몇몇 사람들이 MVC가 대규모 어플리케이션 개발에는 ..

0. props와 state props state - 부모 컴포넌트에서 자식컴포넌트로 전달되는 읽기전용 데이터 - 자식은 props를 사용해서 부모에게 데이터를 건네줄 수 없다. 부모가 props로 setState를 넘겨주면 자식이 그 함수를 이용해 값을 건네주는 방식이다(Lifting State UP) - 컴포넌트 내부에서 관리되며, 변할 수 있는 데이터 - state의 변경은 컴포넌트의 재렌더링을 유발한다.(웹 애플리케이션을 렌더 하는데 있어 영향을 미칠 수 있는 값) 🤔 props는 읽기전용이라는데 자식컴포넌트에서 상태 바꾸고 싶으면 어떻게 함? (Lifting State Up) 더보기 누르기 더보기 🔸Lifting State Up (State 끌어올리기) 1) 부모컴포넌트에서 'useState' ..

0. React-Query 🔸정의 및 특징 - 기존의 client state 를 다루는 라이브러리는 Redux,MobX,Zustand 가 있다. 이러한 라이브러리는 클라이언트 애플리케이션의 상태를 중앙 집중화하고 전역으로 관리한다. 대부분 이런 상태 관리 라이브러리를 사용하며 클라이언트 상태와 서버 상태를 함께 담아주고 있는 경우가 대부분이다. - 반면, Tanstack Query 는 서버 상태와의 상호작용을 중심으로 하는 상태관리 라이브러리이다. (서버 데이터 상태관리) - react-query를 사용해 서버 상태를 관리한다면 클라이언트 상태를 분리하여 관리할 수 있기 때문에 직관적이고 효율적인 관리가 가능해진다. - Caching 지원 - 동일한 데이터에 대한 중복 요청을 제거하고 한 번만 요청하도록..

0. setState 함수 - useState 에서 setState 함수는 상태값을 변경하여 컴포넌트를 리렌더링 하도록 요청하는 함수이다. - 이 함수는 새로운 상태값이나 이전 상태값을 받는다. - setState를 호출하면 React는 상태 값을 업데이트하고 관련된 컴포넌트를 다시 렌더링한다. 1. 새로운 상태값 VS 이전 상태값 받기 - setState 함수를 쓸 때 아래와 같은 코드를 많이 봤을 것이다. 무슨 차이가 있을까? const [state1, setState1] = useState({ id: '', name: '', }); const [state2, setState2] = useState({ id: '', name: '', }); setState1({ ...state1, name: e.ta..

0. 커스텀 훅 - React 에서 기능을 재사용하기 위한 좋은 방법이다. - 커스텀 훅을 만들면 여러 컴포넌트에서 동일한 로직을 사용할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있다. - 커스텀 훅은 'use' 라는 접두사로 시작한다. 🔸Counter 예제 코드 import React, { useState } from 'react'; // 커스텀 훅 const useCounter = (initialCount) => { const [count, setCount] = useState(initialCount); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return ..