React 기본 강의 정리 - 8~9

userCallback

userCallback 은 불필요한 렌더링을 막을 수 있으므로 하위 컴포넌트의 참조 함수로 사용되는 경우 습관적으로 사용하는 것이 좋다.

 

contextAPI - createContext

createContext 로 context 를 생성한다.

export const MyContext = createContext({
    myData :  [],
    dispatch: () => {}
});

이렇게 한번 Context 로 등록해놓으면 이후에 다른곳에서 import + useContext 로 사용할 수 있다. context 에 dispatch 를 넣어두면 다른곳에서 해당 context 를 불러와서 dispatch 를 할 수 있다.

 

contextAPI - Provider

render 에서 컴포넌트를 Provider 로 묶어준다.

class MyComponent extends React.Component {
    render(){
        return (
            <MyContext.Provider value={ ... }>
                // ...
            </MyContext.Provider>
        );
    }
}

Provider 안의 value 는 하위 컴포넌트에게 물려줄 값들을 지정한다. 하위에 있는 컴포넌트라면 하위에 몇계층을 거치던지 상관없이 useContext 를 이용해 사용할 수 있다. 성능상의 문제로 useMemo 와 같은 방식으로 캐싱을 해준다.

 

contextAPI - useContext

import { MyContext } from './MyComponent';

...

const { myDispatch } : userContext(MyContext);

 

contextAPI 최적화

React.memo 를 하려면 하위 컴포넌트도 memo 가 적용되있어야한다.

 

React router

페이지가 하나지만 여러개의 페이지가 있는 것처럼 눈속임을 하는 방법. 

react-router-dom : 웹에서 사용하는 react-router

 

BrowserRouter

const MyRootComponent extends React.Component {
    render() {
     return (
         <BrowserRouter>
             <div>
                 <Link to="/A"> toA </Link>
                 <Link to="/B"> toB </Link>
                 <Link to="/C"> toC </Link>
             </div>
             <div>
                 <Route path="/A" component={MyA} />
                 <Route path="/B" component={MyB} />
                 <Route path="/C" component={MyC} />
             </div>
         </BrowserRouter>
     )
    } 
}

React 는 싱글 페이지 앱이기 때문에 Anchor 태그를 사용해서 페이지 이동을 하면 안된다. 눈속임을 할수 있게끔 Link 컴포넌트를 사용해야한다. 실제로는 페이지가 하나다. 새로고침을 하거나 주소창에 직접 입력해서 들어가는 경우 에러가난다. 왜냐하면 주소창에 직접 입력해서 들어가는 경우는 서버쪽에 요청을 하는 동작이기 때문이다. 서버는 가상의 주소를 모르기 때문에 페이지를 읽을 수 없다.

*) Link 가 나열되고 div 로 엮인 공통인 부분과 Route 가 div 로 엮인 바뀌는 부분을 구분할 수 있어야한다. 공통 바분을 레이아웃이라 칭한다.

 

HashRouter

주소 중간에 # 가 붙은 경우 해시 라우터를 사용하고 있는 것이다. 주소가 지저분해지는 대신 주소에 바로 접근이 가능하다. 해시 뒷 부분이 서버에 요청을 하는것이 아닌 '리액트에서 처리해줘야할 가상의 주소다.' 라는 것을 의미하기 때문에 가능하다.

서버는 가상의 주소에 대한 처리를 모르기 때문에 검색엔진의 색인 알고리즘 상에서 불이익이 있을 수 있다. HashRouter가 배포할 때는 편하긴 하지만, 차라리 서버쪽에서 BrowserRouter 를 사용해도 새로 고침이나 주소에 바로 접근하는 것을 가능하도록 한다. 

 

DynamicRouteMatch

const MyRootComponent extends React.Component {
    render() {
     return (
         <BrowserRouter>
             <div>
                 <Link to="/to/A"> toA </Link>
                 <Link to="/to/B"> toB </Link>
                 <Link to="/to/C"> toC </Link>
             </div>
             <div>
                 <Route path="/to/:name" component={MyComponent} />
             </div>
         </BrowserRouter>
     )
    } 
}

path 상에 pathVariable 을 지정할 수 있다. 이후 연결된 컴포넌트에서 this.props.history, this.props.match 를 이용하여 pathVariable 값을 얻어올 수 있다. 마찬가지로 쿼리 스트링도 전달할 수 있다.

 

this.props.history 

사용자의 페이지 이동 내역, 리액트는 페이지 넘나드는 작업이 싱글 페이지에서 하는 눈속임이기 때문에 실제 브라우저가 제공하는 페이지 이동 라이브러리를 사용하면 안된다. 기본 브라우저의 동작과 다르다. 리액트에서 제공하는 것을 사용해야한다. 참고로 this.props.history.pushState 도 내부적으로는 history.pushState 를 사용하고 있긴하다.

 

this.props.match

Route 가 전해준 pathVariable 을 읽을 수 있다.

 

this.props.match

Route 가 전해준 queryString 을 읽을 수 있다. 정말 주소 자체에대한 정보를 담고 있다.URLSearchParams 와 같이 사용하면 쿼리 스트링을 더 쉽게 다룰수 있다.

 

Route 를 통해 props 넘기기

1. <Route path="/A" component={() => <MyA myPropsValue1 = "abcd" /> } />
2. <Route path="/A" render={(props) => <MyA myPropsValue1 = props.abcd /> } />

 

 

Switch

const MyRootComponent extends React.Component {
    render() {
     return (
         <BrowserRouter>
             <div>
                 <Link to="/to/A"> toA </Link>
                 <Link to="/to/B"> toB </Link>
                 <Link to="/to/C"> toC </Link>
                 <Link to="/to/D"> toD </Link>
             </div>
             <div>
                 <Route path="/to/:name" component={MyComponent} />
                 <Route path="/to/D" component={MyD} />
             </div>
         </BrowserRouter>
     )
    } 
}

위 경우 toD 가 문제인데 위 Route 컴포넌트에 의해서 MyComponent 로 이동 할 수도 있고 MyD로도 이동할 수 있다. 결과는 둘다 나오는데 이렇게 애매모호한 경우 단 하나로만 라우팅 되도록 할 수 있게 도와주는 것이 Switch 다. 

const MyRootComponent extends React.Component {
    render() {
     return (
         <BrowserRouter>
             <div>
                 <Link to="/to/A"> toA </Link>
                 <Link to="/to/B"> toB </Link>
                 <Link to="/to/C"> toC </Link>
                 <Link to="/to/D"> toD </Link>
             </div>
             <div>
                 <Switch>
                     <Route path="/to/:name" component={MyComponent} />
                     <Route path="/to/D" component={MyD} />
                 </Switch>
             </div>
         </BrowserRouter>
     )
    } 
}

Switch 를 사용하면 제일 처음 일치하는 Route 를 사용하여 이동한다.

 

exact path

path 가 정확히 일치하는 경우 라우팅 시킨다.