열정 실천

json-server 는 간단한 RESTful API를 빠르게 구축하기 위한 도구로 주로 프론트엔드 개발 중 백엔드 없이 빠르게 데이터 API를 구현할 때 사용한다.   1. json-server 라이브러리를 설치한다. npm install json-server  2. src폴더 안에 새로운 폴더를 만들고 db.json 파일을 생성한다.   3. db.json 파일에 원하는 데이터를 넣어준다. { "user": { "baby" : { "babyName" : "딩글이", "birthDate" : "2000-06-14" }, "parentContacts" : { "momPhoneNum..

클라이언트 상태(Client State)란?서버와 독립적인 데이터로, UI 동작이나 사용자 입력에 의해 생성 및 관리다.컴포넌트 간 데이터 공유, 사용자 인터페이스 상태(모달 열림/닫힘, 폼 입력 값 등)에 주로 사용된다.React 내장 기능으로는 { useState, useReducer, useContext } 등이 있다. 클라이언트 상태 관리 라이브러리는 Redux, Zustand, Recoil 등이 있다. 서버 상태(Server State)란?서버에서 제공된 데이터로, 클라이언트에서 이를 받아 관리한다. API를 통해 서버 데이터를 가져오고, 캐싱, 동기화, 에러 처리 등의 작업이 필요하다.React 내장 기능으로는 { useEttect, fetch, axios } 등이 있다. 서버 상태 관리 라이..

useState란? 함수형 컴포넌트 안에서 상태 관리를 하기 위한 Hook 🐾 State 특징 변수 대신 쓰는 데이터 저장 공간 문자, 숫자, array, object 다 저장 가능 State for WebApp : state는 변경되면 html이 자동으로 재렌더링 됨! 자주 바뀌거나 중요한 데이터들은 state에 저장 🔊 사용 방법 우선 useEffect hook을 사용하기 위해서 import 해준다. import useState from 'react'; // import 1. 선언하기 let[name, setName] = useState('내용'); 첫 번째 인자 : 값을 저장할 변수 두 번재 인자 : 변수를 변경하기 위한 함수 2. 변경하기 setName('state값 변경'); 이처럼 state의..

useEffect 클래스형 컴포넌트의 생명주기 함수 중 componentDidMount, componentDidUpdate, componentWillUnmout 의 기능을 수행한다. 즉, 1. 마운트 됐을 때 (처음 컴포넌트가 화면에 나타날 때) 2. 업데이트 될 때 (특정 props가 바뀔 때) 3. 언마운트 됐을 때 (컴포넌트가 소멸되기 직전에) 🔊 사용 방법 우선 useEffect hook을 사용하기 위해서 import 해준다. import React, { useEffect } from 'react'; //import 1. 마운트(mount) 됐을 때 useEffect의 첫 번째 인자인 함수에 실행할 코드를 작성한 후, 두 번째 인자에 이렇게 빈 배열을 두면 된다. useEffect(()=>{ co..

들어가기 전.. React의 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 현재는 대부분 함수형 컴포넌트를 사용한다. 하지만 옛날에는 클래스형 컴포넌트를 사용해 개발했기 때문에 코드를 이해하기 위해서 알아둘 필요가 있다. 다음에 클래스형 컴포넌트에 대해 공부해보는 걸로 하고! 이번 글은 함수형 컴포넌트에 대한 것이다. 기존의 웹 프레임워크는 MVC 방식으로 정보, 화면, 구동코드를 분리하여 관리했다. 정보는 Model이 화면은 View가 구동은 Controller가 담당했다. 이 방식은 코드 관리를 효율적으로 할 수 있지만 각 요소의 의존성이 높아 변경이 쉽지 않았다. 웹 사이트의 화면은 각 요소가 비슷하고 반복적으로 사용한다는 점을 착안하여 컴포넌트가 등장하게 되었다. 레고를 조립하듯이 컴포..