Context API React.createContext(defaultValue) => {Provider, Consumer} React.createContext 함수를 호출하면 Context 객체가 생성됩니다. 생성된 context 객체로부터 상위 컴포넌트에서는 Provider 컴포넌트를 이용해서 데이터를 전달하고 하위 컴포넌트에서는 Consumer 컴포넌트를 이용해서 데이터를 사용하는 구조입니다. const UserContext = React.createContext(default); 아래 코드는 Provider 컴포넌트로부터 전달된 데이터를 두개의 하위 컴포넌트에서 사용하는 코드입니다. useContext 훅을 사용하여 Consumer 컴포넌트를 생략한 컴포넌트와 그렇지 않은 컴포넌트가 있습니다. 중..
컴포넌트의 State와 Props State는 해당 컴포넌트가 관리하는 데이터이고, Props는 부모 컴포넌트로부터 전달받은 데이터입니다. React에서는 UI 데이터는 반드시 Props와 State로 관리하여야 합니다. UI 데이터를 State와 Props로 관리하지 않으면 UI 데이터가 변경되어도 화면이 자동으로 렌더링되지 않을 수 있기 때문입니다. useState 훅 import React from "react"; let color = "red"; export default function MyComponent() { function onClick() { color = "blue"; } let style = { backgroundColor: color, } return ( 클릭 ) } 위 코드를 실..
Single Page Application(SPA)은 초기 요청 시 서버에서 첫 페이지를 처리하고 이후의 라우팅은 클라이언트에서 처리하는 웹 애플리케이션입니다. 전통적인 방식의 웹 페이지는 페이지를 전환할 때마다 서버에서 렌더링 결과를 받기 때문에 화면이 깜빡이는 단점이 있습니다. 하지만 SPA는 페이지 전환에 의한 렌더링을 클라이언트에서 처리하기 때문에 마치 네이티브 애플리케이션처럼 자연스럽게 동작하도록 구현할 수 있습니다. SPA가 구동되는 과정 SPA에서는 웹 페이지가 클라이언트에 의해 렌더링된다. 클라이언트 측에서 Javascript(주로 axios 혹은 XMLHttpRequest 객체)와 URL을 통해 서버에게 데이터를 요청하고 응답받는다. 서버는 URL을 통해 들어온 요청에 대한 응답만 해주면..
#6. 리덕스로 상태 관리하기
리덕스는 자바스크립트를 위한 상태 관리 프레임워크입니다. 흔히들 리액트를 사용할 때 리덕스도 같이 사용합니다. 리액트에서 데이터 관리를 위한 다양한 방법들이 있지만 굳이 리덕스를 사용하는 이유는 무엇일까요? 리덕스를 사용했을 때 이점은 다음과 같습니다. 컴포넌트 코드로부터 상태 관리 코드를 분리 같은 상탯값을 다수의 컴포넌트에서 필요로 할 때 좋음 페이지가 전환되어도 데이터는 살아 있어야 할 때 좋음 리덕스 사용 시 따라야 할 세가지 원칙이 있습니다. 전체 상탯값은 하나의 객체에 저장한다. 상탯값은 불변 객체로 관리한다. 상탯값은 순수 함수에 의해서만 변경되어야 함. 기본적인 리듀서의 구조는 아래와 같습니다. 스토어는 상태를 가지고 있으고, 컴포넌트는 디스패치 함수를 통해 액션을 리듀서로 전달합니다. 그..