[React] component, page transition, redux, styled component

Component

 

클래스 혹은 함수로 정의할 수 있다.

리액트로 작성된 화면은 컴포넌트로 구성되어 있다.

UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 

컴포넌트의 두가지 종류인 클래스 컴포넌트와 함수형 컴포넌트의 생명주기는 https://dev-dorydory.tistory.com/14에 정리해두었다.

 

Page Transition (페이지 이동)

라우팅이란?

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

React Router가 라우팅 라이브러리 중 가장 많이 쓰인다.

 

react-router

사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 도앚ㄱ할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.

BrowserRouter, HashRouter가 가장 많이 사용된다.

 

BrowserRouter

url과 UI를 동기화해주는 라우터

웹 애플리케이션이 History API를 사용하여 페이지를 새로고침 없이 주소 변경 가능하게 하고, 관련 정보를 props로 쉽게 조회하거나 이용할 수 있게 해줌

 

Route

컴포넌트에 path 속성을 이용하여 원하는 url을 지정하여 그 url에 접속하면 해당 컴포넌트만 렌더링되어 사용자 경로에 따라 다른 컴포넌트를 보여줄 수 있게 된다.

 

Switch

Route로 생성된 자식 컴포넌트 중 매칭되는 첫번째 Route를 렌더링해준다.

각 url에 따라 변경하고 싶은 컴포넌트를 Switch 태그로 감싸주면 된다.

Switch의 외부는 모든 페이지에서 공통으로 보여지는 부분이다.

 

Link

html의 링크 태그 중 <a></a>와 같은 개념이다.

<Link to=""></Link>로 작성하며,

페이지를 새로 불러오기에 기존 컴포넌트에서 들고 있던 상태값들이 날아가게 된다.

 

https://unit-15.tistory.com/82 

[React] 리액트로 페이지 이동 구현 (라우팅, react-router-dom)

Redux

상태 관리 도구 (State Management Tools)

상태 : React에서 State는 component 안에서 관리된다. component들 간 다이렉트 데이터 전달은 불가능하다. 부모를 통해 주고받아야 한다. 계속 내려 받아야 하기에 상태 관리가 매우 복잡하다.

상태 관리 툴은 전역 상태 저장소를 제공해준다. 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결된다.

 

Redux

자바스크립트 상태관리 라이브러리이며 본질은 Node.js 모듈이다.

 

3가지 원칙

1. 동일한 데이터는 항상 같은 곳에서 가져온다. (Store라는 데이터 공간이 있다.)

2. 리액트에서 setState를 활용해야만 상태변경 가능하듯이 리덕스에서는 Action이라는 객체를 통해서만 상태를 변경할 수 있다.

3. 변경은 순수함수로만 가능하며 Reducer와 연관되는 개념이다.

 

순수함수 조건

1. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
2. 파라미터 외의 값에는 의존하면 안된다.
3. 이전 상태는 절대 건드리지 않고 변화를 준 새로운 상태 객체를 만들어서 반환한다.
4. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환한다.

 

https://hanamon.kr/redux란-리덕스-상태-관리-라이브러리/ 

Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬

Store (스토어)

상태가 관리되는 오직 하나의 공간(한 프로젝트당 하나의 스토어만 가짐)으로 컴포넌트와는 별개로 스토어라는 공간이 있어 그 스토어 안에 앱에서 필요한 상태를 담는다.

컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.

 

Dispatch (디스패치)

스토어 내장함수 중 하나로 액션을 발생시키는 것이다.

액션 객체를 파라미터로 넣어 호출하며, 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태로 만들어 준다.

Action (액션)

앱에서 스토어에 운반할 데이터를 말하며 자바스크립트 객체 형식으로 되어있다.

Reducer (리듀서)

Action을 Store에 바로 전달하지 않고 Reducer에 전달해야 한다. Reducer가 주문을 보고 Store의 상태를 업데이트 한다.

Action을 Reducer에 전달하기 위해서는 dispatch() 메소드를 사용해야 한다.

Action 객체가 dispatch() 메소드에 전달되면 dispatch를 통해 Reducer를 호출한다. Reducer는 새로운 store를 생성한다.

장점

순수함수를 사용하기 때문에 상태를 예측 가능하게 만들고 테스트를 붙이기 좋다.

유지보수에 용이하며 디버깅에 유리하다.

 

Styled Component

기존에는 html, css, js를 별도의 파일로 분리하여 사용하는 것이 최고의 방식이었으나

react, vue, angular 같은 자바스크립트 라이브러리에서는 다른 방식을 사용한다.

최근 웹 개발에서는 여러개의 재활용 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주로 사용된다.

이처럼 스타일 정의를 css 파일이 아닌 자바스크립트로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이 CSS in JS다.

Styled Components는 CSS-in-JS 라이브러리 중 가장 널리 사용되는 라이브러리이다.

https://sangjuntech.tistory.com/11

[Styled-component] styled-component 좀 더 똑똑하게 쓰기

https://kyounghwan01.github.io/blog/React/styled-components/basic/#styled-components-%E1%84%86%E1%85%A1%E1%86%AB-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%87%E1%85%A7%E1%86%AB%E1%84%89%E1%85%AE

styled-components 개념 및 예시, react, redux

https://www.daleseo.com/react-styled-components/

Styled Components로 React 컴포넌트 스타일하기