[Challenge / day-25] React Router 소개, Recoil 소개, Style 소개

 

오늘의 공부범위 : 강의 36-8강(Part3. ch2. 6-8강)

 

목차

1. React Router 소개

2. Recoil 소개

3. Style 소개

 

 

오늘 세 개나 소개해야하므로 강의내용을 중심으로 간단하게만 소개해보고 나머지 내용은 공식문서를 항상 읽는 것을 명심해야한다!!(강사님의 가장 중요한 가르침~!!)

 

오늘 공부도 시작~~

#1 React Router 소개

React Router는 응용프로그램의 URL을 관리하고 URL을 기반으로 다양한 콘텐츠를 표시할 수 있는 널리 사용되는 라우팅 라이브러리이다. React Router는 전체 페이지를 다시 로드하지 않고도 탐색할 수 있는 단일 페이지 응용프로그램(SPA)을 만들 수 있도록 도와준다.

 

하는 일을 요약하면 다음과 같다.

• History 스택을 관리
• URL과 routes 경로를 매칭
• Route 매칭을 통해 적절한 UI를 렌더링

React Router는 application(이하 app)의 경로를 구성요소(element)로 정의하는 라우팅에 선언적 접근방식을 사용한다. 즉, app의 URL이 변경되면 응답 라우터가 해당 경로에 적합한 구성요소를 렌더링한다.

다음은 React Router의 작동 방식에 대한 간략하게 요약한 것이다.

1. 먼저, React Router의 <Route> component를 사용하여 경로를 정의합니다. 경로 및 구성 요소를 지정하여 경로를 정의할 수 있다.

2. 사용자가 새 URL로 이동하면 React Router는 정의된 각 경로의 경로가 현재 URL과 일치하는지 확인한다.

3. 일치하는 항목이 발견되면 React Router는 해당 경로와 관련된 구성요소를 렌더링한다.

4. 일치하는 항목이 없는 경우 React Router는 기본 구성 요소를 렌더링하거나(초기화면으로 돌아가거나) 사용자를 다른 URL로 리디렉션할 수 있다(page not found 404 같이 경로이동 실패 화면).

React Router는 또한 application의 다른 페이지에 대한 링크를 만들 수 있는 <Link> 및 <NavLink>와 같은 다른 component를 제공한다. 이러한 구성 요소는 자동으로 URL을 업데이트하고 렌더링할 적절한 구성 요소를 트리거한다.

 

Brouser Router를 통해 루트로 경로를 설정해준 것을 Link를 통해 렌더링 되도록 지정해줄 수 있고 다음과 같은 장점이 있다.

• Link를 사용함으로써 전체 페이지를 새로고침 할 필요 없이 URL을 바꿔줄 수 있다 (반응 속도가 빨라지는 효과!)
• Link가 클릭 될 경우 browser stack에 해당 로케이션을 쌓음 > history에 이용

React Router는 또한 중첩된 경로, 경로 매개변수 및 프로그램 탐색과 같은 고급 기능을 지원하므로 보다 복잡한 라우팅 패턴을 작성할 수 있다.

 

강사님이 알려주신 개념을 토대로 React-create-app을 해서 임의대로 경로를 생성해보았다. 연결이 잘 되게하는 것은 추후에 코드를 짜는 부분에서 더 다듬어보면 좋을 것 간다. 경로안에 또다른 경로를 넣는 것은 처음 배우는 것 같아 확실히 실습이 필요한 부분이다.

 

#2. Recoil 소개

Recoil에 대해 배우기는 했지만 아직 이해가 부족하므로 핵심만 정리하고 공식문서 링크를 통해 나머지는 찬찬히 살펴보도록 하자.

 

Atoms: Atoms는 Recoil의 기본 상태 단위이다. 이름 '원자'답게 상태로 관리할 수 있는 최소 단위의 조각이다. Atoms는 app의 모든 component에서 읽고 쓸 수 있는 전역 상태 조각이다. app 전체에서 공유해야 하는 일부 데이터를 보유하는 변수로 생각하면 이해하기 쉽다.

 

Selector: Selector는 하나 이상의 Atoms에서 데이터를 도출하는 기능이다. Selector는 파생 상태를 계산하거나 데이터를 필터링하고 변환하는 데 사용할 수 있다. Selector를 메모할 수도 있는데, 셀렉터는 종속성이 변경될 때만 다시 계산된다.

 

이것들 외에도 Async data, Minimal boilerplate와 같은 개념들이 더 있지만 소개할 내용이 많고 강의를 듣기는 했지만 뒷부분에서 더욱 자세하게 쓰면서 알아볼 예정이라 공식문서에게 차례를 넘긴다.

 

#3. Styled 소개

Styled-components는 마침 부트캠프 과정에서 배우는 것과 일치해서 반가웠다. 일부 내용은 사이드 프로젝트 30일 챌린지 시작하는 날 직전에 작성한 내 게시물에서도 확인할 수 있다. 더 내용을 많이 담아서 공식문서를 파헤치는 게시물을 작성할 계획이었으나 할 일이 너무많아서 후순위로 밀려 지금은 거의 queue에도 없는 수준이다.

 

Styled-components도 핵심적인 특징을 알아보고 마치도록 하자.

CSS-in-JS의 일환으로 CSS파일을 별도로 만드는 것이 아니라 Style을 컴포넌트화해서 사용한다.

기본적인 CSS 틀을 컴포넌트로 만든 뒤 React와 비슷하게 props를 활용하여 렌더링을 속성에 따라 스위치 할 수도 있고, 추가적인 CSS속성을 지닌 컴포넌트로 확장하거나 기존의 CSS속성을 일부 가지고있지 않은 컴포넌트로 적용을 축소할 수도 있다. 확정성이 크다는 말이다.

.attrs 로 추가속성을 넘길 수도 있으며, animation도 사용이 가능하도록 되어있다(시도하다가 실패하기는 했다...).

 

정말 여러가지 툴들을 배우고 있는데 하나하나 잘 습득해서 내 것으로 만들어서 앞으로도 쭉 사용할 수 있도록 해보자!

 

 

 

 

관련링크

패스트캠퍼스 : http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발 #패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact