Study

URL에 파라미터를 전달하는 방법

CSS에 동적할당을 하는 것처럼, {${id}}방식을 사용해 URL에 동적으로 파라미터를 입력할 수 있다.
이것을 가져오기 위해 react-router-dom의 useParams을 사용할 수 있다.

<Route path={`/${userId}/place`} element={<Place />} />;
//place
const Id = useParams().userId;

이렇게 해서 파라미터의 값을 주고받을 수 있다.

display:none;

display:none;을 적용하면 애초에 없던 것처럼 만들 수 있다.
css의 동적할당을 이용해 유효성 검사를 통과하지 못하면 display:none;을 활성화시킬 수 있다.
혹은 @media를 사용할 때 특정너비 이하가 되면 display:none;을 활성시켜 없앨 수 있다.

backdrop, overlay

모달창을 구현할 때 backdrop, overlay를 따로 구현할 수도 있다.
backdrop은 모달창을 띄울 때 모달에 집중할 수 있도록 모달이 아닌 다른 부분을 흐리게 처리하는 것을 당당하고,
overlay는 모달창의 내부부분을 담당한다.

CSSTransition

컴포넌트가 돔에 마운트되거나 언마운트 될 때, 전환효과가 즉시 일어난다.
CSSTransitiond을 사용해 생명주기와 관련지어 전환될때 변환과정을 볼 수 있게 해준다. npm install react-transition-group --save깔고 import { CSSTransition } from 'react-transition-group';import시켜 사용한다.
감싸진 부분의 전환이 보일 수 있게 해주고, 속성들을 추가해 변화를 보여준게 만든다.

const content = (
  <CSSTransition
    in={boolean} //boolean값이 true일떄 마운트, false일떄 언마운트 된다
    timeout={number} //number밀리세컨드동안 변화가 일어난다.
    classNames="cssStyle" //cssStyle의 css를 적용시킨다. 마운트되는 과정에서 *-enter, *-enter-active가 적용되고, 언마운트되는 과정에서 *-exit, *-exit-active가 순차적으로 작동한다.
    mountOnEnter //boolean이 true일때 마운트하기 위해 필요
    unmountOnExit //boolean이 false일때 언마운트하기 위해 필요
  >
    <aside className="side-drawer" onClick={props.onClick}>
      {props.children}
    </aside>
  </CSSTransition>
);

onBlur

focus를 잃을때 이벤트를 발생시킨다.
유효성검사를 할 때, 최초의 input은 false일테지만, 사용자에게 렌더링되자마자 false임을 보여주는 것은 옳지 않다.
onBlur에서 isVisited등의 변수를 선언해 한번이상 클릭됐을때 유효성검사를 하도록 만든다.

reduce

복잡한 상태를 관리하기 용이하다. const [state,dispatch]=useReducer(reducer,initialState)로 이루어졌다.
initialState를 따로 정의해 state의 초기값을 지정한다. 그리고 dispatch()를 호출해 reducer()를 호출한다.
reducer()는 state,action으로 이루어졌다. dispatch에서 넘긴 인자는 action에 종속된다.
action.type으로 어떤 방식으로 호출되었는지 확인 후 state를 변경시킨다. useState의 setState에서 값을 변경하는 것처럼 사용한다.