리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리다. 리덕스를 사용하면 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다. Context API 를 사용해도 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리 할 수 있다. 특히, Context API 와 useReducer Hook 을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 매우 개발 방식이 유사하다. 리덕스에서도 리듀서와 액션이라는 개념을 사용한다. Redux는 Context API 가 지금의 형태로 사용방식이 개선되기도 전에, 그리고 useReducer 라는 Hook 이 존재하기도 전 부터 만들어진 라이브러리다. 사실 C..

1. 클로저란? 클로저는 프로그래밍 언의 스코프와 관련된 속성으로, 특히 함수형 프로그래밍에서 중요하다. 여기서 함수형 프로그래밍에서 중요한 이유는 1. 테이터 은닉 : 클로저를 사용하면, 특정 함수에 한정된 변수를 만들 수 있다. 이는 외부에서 해당 변수에 접근하거나 수정하는 것을 막을 수 있다. 이런 특성은 모듈화, 정보 은닉, 캡슐화 등의 개념과 일치하며, 프로그램의 안정성을 높인다. 2. 상태유지 : 클로저는 함수가 종료된 이후에도 특정 데이터를 기억하는데 사용한다. 이는 함수가 일종의 상태 유지하는 것이다. 예를 들어 함수 호출 간에 일종의 메모리를 갖게 해준다. 이러한 특성은 반복자, 비동기 프로그래밍, 함수 메모이제이션 등에 유용하게 사용된다. 3. 고차 함수와의 상호작용 : 클로저는 고차 ..

리액트에서 컴포넌트를 스타일링 할 땐느 다양한 방식이 있다. 여러 방식 중에 딱히 정해진 방식은 없다. 회사마다 요구하는 스펙이 다르고, 개발자마다 각자 취향에 따라 선택하기 때문이다. 방식은 크게 4가지가 있다. 1. 일반 CSS : 컴포넌트를 스타일링 하는 가장 기본적인 방식 2. SASS : 자주 사용되는 CSS 전처리기(pre-processor) 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있음 3. CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션이다. 4. styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 ..

1. CORS란 교차 출처 리소스 공유(Cross-origin Resource Sharing, CORS)는 추가 HTTP헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 여기서 origin(출처)란 Scheme(protocol), Host(domain), Port로 구성된다. 예를 들어 https://www.google.com/maps 라는 주소가 있다면 protocol : https:// host : www.google.com port : :443 이다. 위와 같이 출처는 서버의 위치를 찾아가기 위해 가장 기본적인 구성요소라고 보면 된다. 여기서 같은 출처와 다른 출처의 구분 같은 출처라 하면 두 URL의..

Hooks은 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있다. 1. useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 함수 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 된다. import { useState } from 'react'; const Counter = () => { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value} setValue(value + 1)}>+1 setValue(value - 1)}>..

모든 리액트 컴포넌트에는 라이프사이클(수명주기)가 존재하다. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음 렌더링 할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할수도 있고, 불필요한 업데이트를 방지해야 할수도 있다. 이때는 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이플사이클 메서드는 클래스형 컴포넌트에만 사용 할 수 있다. 함수 컴포넌트에서는 사용할 수 없어서, 그 대신에 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. 1. 라이프사이클 메서드의 이해 라이플사이크 메서드의 종류는 총 9가지 이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 D..