React Js - [SC] 동적인 UI 처리하기 props, withRouter

React Js - [SC] 동적인 UI 처리하기 props, withRouter

props

태그 내에 변수를 넣고 styled에서 받아서 동적인 처리가 가능하다

Item이란 태그 내에 current라는 변수를 넣고 styled에서 받아서 동적으로 처리하고 있다.

withRouter

다른 컴포넌트를 감싸는 컴포넌트로 Router에 정보 전달이 가능하다

url path 정보 등 유용한 정보들을 얻을 수 있다.

 export default withRouter(
     props => (
         {console.log(props)}
     )
 );

• import

   import { Link, withRouter } from "react-router-dom";

• 사용

  • { location: { pathname } } : props 파라미터에서 pathname = props.location.pathname

   const Item = styled.li`
       width: 80px;
       height: 50px;
       text-align: center;
       border-bottom: 5px solid 
           ${props => (props.current ? "#3498db" : "transparent")};
   `;
   ​
   ​
   export default withRouter(({ location: { pathname } }) => (
       <Header>
           <List>
               <Item current={pathname === "/"}>
                   <SLink to="/">Movies</SLink>
               </Item>
               <Item current={pathname === "/tv"}>
                   <SLink to="/tv">TV</SLink>
               </Item>
               <Item current={pathname === "/search"}>
                   <SLink to="/search">Search</SLink>
               </Item>
           </List>
       </Header>
   )
   );

출처 : https://academy.nomadcoders.co/