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는 객체이다. 따라서 안에 값이 존재하는데 그 값이 인자로 받은 값들이다.
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를 만들어야 한다.
리액트 라우터는 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에 변수를 함께 내보내기 위해서 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을 사용할 때는 이 부분을 지워야 한다.