1. 팀별 과제 진행상황
- 팀원들과 진행되고 있는 과제의 진행상황을 교류하는 중간 점검 시간을 가졌다. 각자 자신만의 어려운 지점에서 고군분투하는 것을 알 수 있었다.
- 대략적인 마크업은 진행했으며, 현재 카테고리 드롭다운을 구현하는 부분과 라우팅으로 데이터를 뿌려주는 부분에서 고민하고 있다.
2. 배운 내용
ClassNames 라이브러리
-
복잡해지는 클래스명을 보다 쉽게 사용할 수 있게 도와주는 라이브러리로 Alternate bind version (for css-modules) 기준으로 ES2015 환경에서는
dynamic class names방식이 더 나을 수도 있다. -
간단한 예시(Alternate bind version)
var classNames = require('classnames/bind');
var colors = {
one: 'white',
two: 'red',
three: 'black'
};
var cx = classNames.bind(colors);
var className = cx('one', ['two'], { three: true });
// result : "white red black"bind는 객체의 호출하는 과정을 줄이기 위한 것이고, 이를 담는 변수명은 사용자가 임의로 지정할 수 있다.
React Route를 이용한 props 보내기
- React Router V6 기준
<Route path="/dashboard" element={<Dashboard />} />사용자가 /dashboard 경로로 이동할 때마다 대시보드 구성 요소를 렌더링하려고 한다고 할 때, Route를 이용해 위와 같이 작성한다.
<Route path="/dashboard" element={<Dashboard authed={true} />} />그리고 이렇게 element 속성 안에 props를 전달하여 사용할 수 있다.
<Link to='register' state={{name:'kyh'}}>그리고 Link 의 경우 위와 같이 props를 전달을 해서 register 경로에 위 값을 전달한다.
import { useLocation } from 'react-router-dom';
const Register = () => {
const location = useLocation()
const Name = location.state.name
return(
<div>
hello my name is {Name}
</div>
)
}
// result : hello my name is kyhuseLocation 라이브러리를 호출해서 변수에 담아 위와 같이 사용할 수 있다.
