22) css module, props, react-router-dom

ppparkta·2022년 12월 28일
1

웹개발

목록 보기
23/26

요약

  • React
    • CSS module
    • props(객체 구조분해할당)
    • react-router-dom
      • 페이지 전환을 위한 준비
      • Link to
      • 동적 url
      • Link 화면 전환 실패 오류 해결

React

CSS module

react에서 css를 사용하는 방법은 3가지가 있다.

1. 인라인

  • 인라인 방식은 작성한 jsx에 직접 style 속성을 줘서 css를 입히는 방식이다.

2. css 방식 (index.css / App.css 이용)

  • 모든 컴포넌트에 동일한 css를 입히는 방식이다. .css확장자명으로 작성한다.

3. css module방식* (App.module.css 이용)

  • 특정 컴포넌트에만 css를 입히는 방식이다. .module.css확장자명으로 작성한다.
  • 다른 css module에서 같은 class명을 사용한다고 해도 빌드 과정에서 컴포넌트 이름이 덧씌워지므로 중복될 우려가 없다.

props

기본적으로 props는 객체이다. 따라서 안에 값이 존재하는데 그 값이 인자로 받은 값들이다.

import B from './B';
export default function A(){
  return(
    <div>
  	  <B user="sooyang">;
    </div>
  );
};

A컴포넌트에서 B컴포넌트를 사용할 때 props를 보내기 위해서는 props종류="값" (user="sooyang") 으로 할당해야 한다.

여기서 B컴포넌트가 props를 받아오는 방법이 더 있어서 추가로 정리한다.

[1번]

export default function B(props){
  return(
    <div>
      안녕하세요 {props.user}.
    </div>
    );
};

[2번]

export default function B({user}){
  return(
    <div>
      안녕하세요 {user}.
    </div>
    );
};

사실 위의 코드는 다른 방법을 사용한 것이 아니라 같은 방법을 사용한 것이다. 다만 2번 방법은 1번의 props를 객체 구조분해할당하여 더 간결하게 작성한 것이다.

따라서 같은 방법이지만 1번 방법이 기본이므로 다시한번 정리했다.

props로 받아온 값은 불변성의 원칙이 그대로 적용된다. 따라서 값을 직접적으로 변경할 수 없다. props를 변경하며 사용하기 위해서는 새로운 state를 만들어야 한다.


react-router-dom

리액트 라우터는 URL을 이용해서 페이지를 전환시키는 역할을 한다.

$ npm install react-router-dom@5.3.0

recte-router-dom을 설치한다. 현재는 버전 6까지 업데이트 됐는데, Switch를 쓰기 위해서 일부러 버전 5.3.0으로 다운그레이드 했다. 6버전에서는 일부 문법이 변경되었으므로 사용하기 전에 충분한 검색이 필요하다.

준비 과정

App.js에 react-router-dom을 import한다.

import { BrowserRouter, Route, Switch } from 'react-router-dom';

App.js 전체를 BrowserRouter로 감싸준다. 그리고 화면이 바뀌는 부분은 Switch로 감싸준다.

Switch내부에서 Route를 이용해서 url을 설정할 수 있다.

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route exact path="/">
            <DayList />
          </Route>
          <Route path="/day/:day">
            <Day />
          </Route>
          <Route>
            <EmptyPage/>
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

Route의 path값을 설정하면 url을 생성할 수 있다. 가장 처음에 보여지는 url은 /이다. /뒤에 어떤 문자가 오게 되면 새로운 페이지로 이동한다.

Route path='/' 일때
1. exact 키워드 사용
or
2. Switch의 가장 하단에 배치

리액트 라우터는 아래에서 위로 찾고자 하는 url을 포함한 url을 찾아서 반환한다. 아래의 상황으로 예를 들자면,

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route path="/">
            <DayList />
          </Route>
          <Route path="/day">
            <Day />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

이런 경우 //day 속에 완전히 포함되므로 아래에서 위로 읽는 리액트 라우터의 규칙 상 시작화면이 아니라 /day 화면을 보여준다.

따라서 이를 방지하기위한 키워드인 exact를 추가하거나 Route를 Switch의 가장 하단에 배치하여 가장 먼저 읽히게 하는 것이다.

페이지 전환

이렇게 나누어진 url을 컴포넌트 내부에서 이동시키는 것도 가능하다. 페이지 전환이 필요한 컴포넌트에 Link를 추가한다.

import { Link } from 'react-router-dom';
export default function Header() {
  return (
    <div className="header">
      <h1>
        <Link to="/">토익 영단어(고급)</Link>
      </h1>
    </div>
  );
}

<Link to=""> 를 이용해서 이동하고자 하는 url로 이동할 수 있다. html의 a태그와 비슷하지만 리액트 라우터로 만든 url로 이동하고자 할 때 사용할 수 있다.

동적 url

url에 변수를 함께 보내서 다른 페이지에서 전달된 변수를 사용할 수 있다.

url에 변수를 함께 내보내기 위해서 App.js로 돌아와서 Route를 수정한다.

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <Switch>
          <Route exact path="/">
            <DayList />
          </Route>
          <Route path="/day/:day">
            <Day />
          </Route>
          <Route>
            <EmptyPage/>
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

위에서 본 것과 모두 같고 path만 조금 달라졌다. <Route path="/day/:day">를 사용했다. 원하는 url 뒤에 /:변수명 을 붙여주면 url에 변수를 내보낼 수 있다.

:를 붙이지 않으면 동적 url이 적용되지 않으니 꼭 붙여야 한다.

동적 url을 만들어왔으면 이 url에 담긴 변수를 사용할 수 있어야 한다. 그 때 사용하는 것이 useParams이다.

import { useParmas } from 'react-router-dom';

useParams는 다음과 같이 사용할 수 있다.

const a = useParams();
const day = a.day;

혹은

const { day } = useParams();

로 객체 구조분해할당하여 사용할 수 있다.

export default function Day() {
  const { day } = useParams();
  const wordList = dummy.words.filter(word => (word.day === Number(day)));

  return (
    <>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {wordList.map(word => (
            <tr key={word.id}>
              <td>{word.eng}</td>
              <td>{word.kor}</td>
            </tr>
          ))}
        </tbody>
      </table>
      </>
  );
}

day에 객체 구조분해할당으로 동적 url을 받아왔다. 변수로 만들었으므로 jsx안에서 사용할 수 있다.

추가로 이렇게 동적 url을 만들기 위해서는 다음과 같이 작성한다.

<Link to={`/day/${day.day}`} />

이미 Route에 동적url을 사용하겠다고 명시했기 때문에 원래의 url 뒤에 원하는 값을 붙여서 내보내는 것이다.

create-react-app으로 파일을 생성한 경우 index.js에 기본적으로
<React.StrictMode> 가 작성되어 있는데, 이게 리액트 라우터의 렌더링을 방해해서 제대로 동작하지 않게 한다. 따라서 react-router-dom을 사용할 때는 이 부분을 지워야 한다.

profile
겉촉속촉

0개의 댓글