🎯 Achievement Goals

• withRouter

👉 withRouter

어제 노마드코더 리액트 챌린지를 하면서 문제를 잘못 풀었다는 것을 깨달았다. styled-components를 써서 리액트 구조를 변경시키는 것은 맞았지만 중요한 한가지를 빼먹었던 것이였다.

나는 hover를 써서 마우스를 올릴 때마다 리스트의 배경색이 바뀌도록 했었는데, 이게 아니라 withRouter를 사용한 후에 props를 전달해서 현재 페이지의 위치가 바뀔 때 마다 리스트의 배경색이 바뀌는 것이였다. 그래서 오늘 문제를 잘못 풀었다는 것을 깨닫고 바로 다시 풀어보았다.

withRouter에 대한 내용은 구글링을 잠깐만 해보아도 많은 내용들이 나왔다. 라우팅을 하는 컴포넌트가 있고, 그 라우팅된 컴포넌트에서 다른 컴포넌트를 사용해야 할 때 사용한다.

목록들이 있고, 그 목록을 클릭했을 때 아래에는 다른 컴포넌트가 표시되어야 할 때 사용해야 한다. 그래서 withRouter를 사용하면 이번 챌린지의 의도와 완벽히 부합한다.

// rounter-dom을 설치했다면 import만 해주면 된다.
import { Link, withRouter } from 'react-router-dom';
import styled from 'styled-components';

// 생략

const Item = styled.li`
    color: ${props => (props.selected ? "white" : "black")};
    background-color: ${props => (props.selected ? "yellow" : "white")};
`;

export default withRouter (({ location: { pathname } }) => {
    <Header>
        <List>
          <Item selected={pathname === '/'}>
            <Link to='/'>Prices</Link>
    //생략
})

withRouter 에는 전달인자가 여러개 있지만 그 중에서 location을 써서 위치를 props로 넘겨주어서 그 위치가 selected가 되면 색과 배경색이 변하도록 해주었다!

🙌 느낀점

사실 오늘은 아침에 챌린지 문제를 다시 해결한 뒤로, 하루를 푹 쉬었다. 마냥 놀기보다는 앞으로 남은 두달을 위해 재충전이라고 생각하고 맘편히 쉬어주었다!

하루종일 놀았더니 밤이 되서야 다시 공부를 안했다는 불안감이 생기면서 공부에 대한 의욕이 뿜어져나왔다….. 그래도 하루 푹 쉬어주니까 컨디션은 완벽히 돌아온 것 같아서 다행이다 ㅠㅠ 앞으로 쉬는 날 없이 프로젝트까지 달려 볼 예정이다!!! 그리고 당장 내일 토, 일 주말 정말 빡씨게 공부해서 다음주를 맞이하자!!

👊 내일의 TIW(today I Will)

Redux