Parameter, Query Example

• /user/lee
• /search?keyword="hi

위에서 user에 lee를 넘기는 방식이 parameter로 특정 사용자를 조회할때 사용하고, query는 키워드를 검색할때 페이지에 필요한 옵션을 전달할 때 사용을 하게 된다.

URL Parameter

• match라는 객체안의 params 값을 참조

import React from 'react';

const data = {
  seoul: {
    name: '서울',
    location: 'seoul'
  },
  gyonggi: {
    name: '경기도',
    location: 'gyonngi-do'
  }
};

const Location = ({ match }) => {
  const { cityname } = match.params;
  const city = data[cityname];
  if (!city) {
    return (
      <div>
        <h1> {cityname} 은 존재하지 않는다.</h1>
      </div>
    );
  }

  return (
    <div>
      <h1>
        {' '}
        {cityname} ({city.name})
      </h1>
      <p>{city.location}</p>
    </div>
  );
};

export default Location;

• App.js에서 routing을 정의

import React from 'react';
import { Route, Link } from 'react-router-dom';
import './App.css';

import Home from './components/Home';
import Search from './components/Search';
import Location from './components/Location';

const App = () => {
  return (
    <div>
      <Link to="/">홈</Link>
      <Link to="/search">검색</Link>
      <Link to="/location/seoul">서울</Link>
      <Link to="/location/gyonngi">경기</Link>
      <Link to="/location/star">별나라</Link>

      <Route path="/" component={Home} exact={true}></Route>
      <Route path="/search" component={Search}></Route>
      <Route path="/location/:cityname" component={Location}></Route>
    </div>
  );
};

export default App;

URL 쿼리

• url 쿼리의 경우에는 match와 다르게 location의 객체에 있는 값을 조회가 가능하다.
• /search?keyword=hi의 url을 호출했을때 location의 객체의 형태는 아래와 같다.

{
  "pathname": "/search",
  "search": "?keyword=hi"
}

• query 문자열을 객체로 변환할때는 qs의 라이브러리를 사용한다

yarn add qs

import React from 'react';
import qs from 'qs';

const Search = ({ location }) => {
  // ?keyword=
  const query = qs.parse(location.search, {
    ignoreQueryPrefix: true // prefix: ?
  });

  const keyword = query.keyword;

  return (
    <div>
      <h1>Search</h1>
      <p> 검색 쿼리는 {keyword}</p>
    </div>
  );
};

export default Search;

• 다음과 같이 추가한 이후에 url을 http://localhost:3000/search?keyword=hi을 통해 접속하면 원하는 결과를 얻을 수 있다.

Routing 이란?

routing 은 특정 주소에 특정 페이지를 보여주는게 라우팅(Routing)

react-router 사용하기

default로 react는 routing의 기능이 없기 때문에 라우팅 라이브러리를 사용해야 한다. 가장 많이 사용하는 routing library는 react-router

yarn add react-router-dom

프로젝트에 라우터를 적용

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

위 코드에서 아래와 같이 추가

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <BrowserRouter>
    <App />{' '}
  </BrowserRouter>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

두개의 컴포넌트 생성하기

import React from 'react';

const Search = () => {
  return (
    <div>
      <h1>Search</h1>
    </div>
  );
};
export default Search;

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}; 
export default Home;

App.js 를 수정

• app에서 exact={true}를 사용하지 않으면 search로 검색했을때 Home, Search의 두개의 페이지가 화면에 중복으로 표시된다.
• Link를 클릭하면 다른 주소로 이동시켜주는 컴포넌트
• a tag 를 사용하면 화면이 새로고침 된다. (페이지를 렌더링)
• Link 사용하면 페이지 새로고침 하지 않고

import React from 'react';
import { Route, Link } from 'react-router-dom';
import './App.css';

import Home from './components/Home';
import Search from './components/Search';

const App = () => {
  return (
    <div>
      <Link to="/">홈</Link>
      <Link to="/search">검색</Link>
      <Route path="/" component={Home} exact={true}></Route>
      <Route path="/search" component={Search}></Route>
    </div>
  );
};

export default App;

EsLint, Prettier는 VS Code에서 React를 개발할때 설치하면 좋은 확장 툴이다.
ESLint는 문법 검사, Prettier는 코드 스타일 자동 정리를 해주는 툴이다.

여러 개발자들이 동시에 개발하는 프로젝트라면 Prettier는 무조건 필수라고 할 수 있다.
git에서 merge할때 indentation 관련한 코멘트를 받으면 ... 창피

ESLint는 설치하고 바로 사용하면 되고, Prettier의 경우에는 프로젝트에 설정을 해야 한다.
프로젝트의 root directory에서 .prettierrc라는 파일을 설정하고
아래와 같이 프로젝트에서 사용할 prettierrc를 정의를 하면된다.

prettierrc example

{
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}

prettier에 관련한 옵션은 다음 사이트에서 확인

코드 자동으로 정렬

VS Code에서는 코드를 저장할때 자동으로 정렬을 해준다.

[Code] - [Preference] - [Settings] 
에서 format on save 을 검색하고 체크

Homebrew 설치

 /usr/bin/ruby -e "$(curl -fsSl https://raw.githubusercontent.com/Homebrew/install/master/install)"

nvm 설치

• node.js 버전 관리 툴
• node.js의 버전 업데이트를 하거나 프로젝트 별로 버전이 다른 node.js를 사용하기 위해서

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

• 환경설정

# ~/.bsah_profile 에 아래와 같이 추가 (macos 기준)

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" 

node 설치

• nvm이 설치되었다는 가정하에서아래와 같이 최신 버전으로 설치

nvm install --lts

yarn 설치

brew update
brew install yarn
yarn config set prefix ~/.yarn
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile

Visual Studio Code로 React를 개발하면서 유용한 확장 프로그램을 정리

ESLint

• 문법 및 코드 스타일을 검사

reactjs Code Snippets

• 라이프사이클 함수를 작성할때 단축 단어를 사용해 코드 자동 생성

Prettier-Code formatter

• 내가 설정한 코드 포맷의 스타을로 자동 정리해주는 도구

react import package absolute path 하는 방법

Can't resolve module 이라는 에러가 난다면 상대경로가 아닌 절대경로로 하는게 좋다. 상대 경로로 할 경우에는 import module from '../../../과 같이 명시를 해줘야 하니... 절대 경로로 하는 방법은 아래와 같다.

Project의 ROOT (README.md를 보통 만드는)에 가서 .env의 파일을 만들고 NODE_PATH=src/ 다음과 같이 입력하면 src의 아래에 있는 pages, modules 등을 import Module from 'modules/modulename' 으로 입력하면 된다.

만약 적용이 안된다면 재시작을 해주면 정상적으로 반영된다.

react앱에서 데이터는 위에서 아래로 props을 통해 전달되지만 여러 컴포넌트들에 전해줘야 하는 props의 경우에는 context를 이용하면 트리 단계마다 명시적으로 props을 넘겨주지 않아도 많은 컴포넌트가 값을 공유할 수 있다.

global 변수로서 context를 사용하는 경우는 로그인한 유저, 테마, 선호하는 언어 등이 있을 수 있다. 코드는 아래와 같다.

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

위와 같이 props으로 넘기는게 아니라 아래와 같이 context를 사용하면 자식에 props을 넘길 필요가 없음

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() { 
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component { 
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할때만 사용해야 한다.

props와 state는 다르다는것을 알고 상황에 알맞게 잘 사용을 해야한다. 두 객체는 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있지만 두객체의 차이는 분명하다. props은 properties의 줄임말로 함수 매개변수처럼 컴포넌트에 전달되는 반면 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리가 된다.

프로젝트를 설계할때는 state가 최소화되도록 작성하는게 좋다. 중복으로 작성하면 UI의 상호작용에 혼란을 줄수 있다.
일단 state가 변경되면 컴포넌트는 렌더링을 다시 시도한다. 아래와 같은 앱을 만들때 어떤 값을 props으로 사용하고, 어떤 값을 state로 사용하는지 생각을 해보자

• 부동산의 목록
• 유저가 입력한 검색어
• 체크박스의 값
• 필터링 된 부동산 목록

데이터에 대해 아래의 세 가지 질문을 통해 결정이 가능하다.

1. 부모로부터 props 을 통해 전달이 되는지?
2. 시간이 지나도 변하지 않는지
3. 컴포넌트 안의 다른 state나 props을 가지고 계산하는지

위 세가지에 해당되면 props 이다.
부동산의 목록은 props을 통해 전달되기 때문에 props이고, 검색어와 체크박스는 시간이 지남에 따라 변하기 때문에 state의 값으로 상태값을 업데이트 해야 한다. 필터링 된 제품의 목록은 컴포넌트 안의 검색어, 체크박스의 값으로 계산하기 때문에 props이다.