[React] '리액트를 다루는 기술' 스터디_3주차

 

목차

• 학습주제
• React Router
• API 연동
• Context API

 

 

 

학습 주제

• 13장. 리액트 라우터
• 14장. 외부 API 연동하기
• Context API

 

 

 

💡 React Router

• router 기능을 구현하기 위해 외부 라이브러리 필요
• 사용 빈도가 가장 높은 react-router-dom 라이브러리 사용

 

프로젝트에 라우터 적용

• 프로젝트에 리액트 라우터 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 된다. 
• BrowserRouter 컴포넌트는 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다.
• Route 컴포넌트로 어떤 규칙을 가진 특정 주소에 컴포넌트를 연결하여 현재 경로에 따라 다른 컴포넌트를 보여줄 수 있다.
  • 이때 root (/) 경로는 다른 하위 경로 규칙에도 일치하기 때문에 exact props를 true로 설정하여 여러개의 컴포넌트가 모두 나타나는 것을 방지해야 한다. 
  •  

  • <Route path="/" component={Home} exact={true} />
    <Route path="/about" component={About} />

 

Link 컴포넌트

•  <a> 태그와 비슷하게 클릭시 다른 주소로 이동시켜주는 기능. 
• 리액트 라우터 사용시 a태그를 직접 사용하면 안된다. 이 태그는  페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려버린다. 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링한다.
• Link 컴포넌트는 a 태그로 이루어져 있지만 페이지 전환을 방지하는 기능이 내장되어 있다.
• 따라서 url에 따른 화면 렌더링은 <Link> 컴포넌트를 사용하여 구현해야 한다. 

 

URL 파라미터와 쿼리

• url 파라미터
  • 라우트로 사용되는 컴포넌트에서 받아 오는 match 객체 안의 params 값을 참조한다. 
  • match 객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 있다.
  • path 규칙에 "/profile/:username" 이라 넣어주면 match.params.username 값을 통해 현재 username 값을 조회할 수 있음.
• url 쿼리
  • 쿼리는 location 객체에 들어있는 search 값에서 조회할 수 있다. 
  • location 객체는 라우트로 사용된 컴포넌트에게 props로 전달되며, 웹 애플리케이션의 현재 주소에 대한 정보가 있다.
  • search 값에서 특정 값을 읽어오기 위해 문자열을 객체 형태로 변환해 주어야한다.
    • 쿼리 문자열을 객체로 변환하기 위해 qs 라이브러리 사용
    • 쿼리 문자열을 객체로 파싱하는 과정에서 결과 값은 문자열이기 때문에 숫자를 받아와야 하면 parseInt 를 통해 숫자로 변환해 주어야 한다. 

 

history 

• 라우트로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나
• 특정 버튼 클릭시 뒤로가거나, 로그인 후 화면을 전환하거나 다른 페이지로 이탈하는것 방지할 때 사용
  • 특히 from 전송후 다른 페이지로 이동할 때 사용했음.

 

withRouter 

• 라우트로 사용된 컴포넌트가 아니어도 match, location, history 객체 접근할 수 있게 해주는 함수
• withRouter 사용시 컴포넌트를 내보내 줄때 (export 시) 함수로 감싸주면 된다.

 

Switch 

• 여러 Route를 감싸서 그중 일치하는 단 하나의 라우트만 렌더링 시켜주는 컴포넌트. 실제로 많이 사용중
• switch 사용하면 모든 규칙과 일치하지 않을 때 보여 줄 Not Found 페이지도 구현할 수 있다.

 

NavLink 

• 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일, css 클래스를 적용할 수 있는 컴포넌트
• 메뉴 활성화시 css 처리할 때 사용. style만 지정하면 state로 관리하지 않아도 되기 때문에 편리하다. 

 

 

 

💡 API 연동

비동기 작업

• Promise
  • 자바스크립트 비동기 처리에 사용되는 객체
  • .then을 사용하여 그다음 작업을 설정한다.  

• async/await
  • Promise를 더욱 쉽게 사용할 수 있도록 해주는 문법
  • Promise가 끝날 때까지 기다리고 결과 값을 특정 변수에 담을 수 있다. 

 

axios

• 가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트 라이브러리
• HTTP 요청을 Promise 기반으로 처리함. return 값이 Promise 객체 형태이다. 

 

API 연동시 유의사항

• useEffect에 등록하는 함수는 async로 작성하면 안된다. useEffect에서 반환해야 하는 값은 뒷정리 함수이고, async/await는 Promise 객체를 반환하기 때문.
• useEffect 내부에서 async/await를 사용하고 싶으면 함수 내부에 async 키워드가 붙은 또 다른 함수를 만들어 사용하면 된다.

 

 

 

💡 Context API

• 전역적으로 사용할 데이터가 있을 때 사용
• 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 한번에 원하는 값을 받아 와서 사용 가능하다. 
• Redux 대신 Context API를 사용하는것을 권장.
• Context는 createContext 함수를 사용해 만들며, 이 함수를 호출하면 Provider와 Consumer 컴포넌트가 반환된다. 
  • Provider
    • Context에서 사용할 값을 설정할 때 사용. set 역할
  • Consumer
    • 나중에 설정한 값을 불러와야 할 때 사용. get 역할

 

useContext Hook

• Consumer 대신 리액트 내장 Hook 중 useContext를 사용하는 방법
• 함수형 컴포넌트에서만 사용할 수 있으며 자주 사용되는 패턴

 

 

 

 

 

 

 

 

※ 출처 『리액트를 다루는 기술 (개정판)』