TIL React Ep.2 : import/export , Router , UseEffect
참고자료 : 코딩애플 <React 리액트 기초부터 쇼핑몰 프로젝트까지!>

import/export

export (내보내기) : export default 변수명 혹은 함수명
import (가져오기) : import 이름 from 경로

내보낼 변수가 많을경우

export {변수1, 변수2}
import {변수1, 변수2} from 경로

Router

<Route> : 직접 Url path를 설정하여 경로에 따른 화면을 보여주거나 컴포넌트를 불러올 수도 있습니다.
<Switch> : 여러개의 경로가 맞을 경우에도 무조건 하나의 화면만 보여줍니다.
<Route path="/:id"> : 뒤에 문자 아무거나 와도 화면을 보여준다는 의미입니다. id 부분은 함수 파라미터처럼 작명하는 부분입니다.

exact

<Route exact path="/">
    <div>메인페이지에요</div>
</Route>
<Route path="/detail">
    <div>디테일페이지에요</div>
</Route>

라우터는 경로가 매칭되는 것들은 전부 보여주게 됩니다. exact 속성을 추가하면 경로를 정확히 입력했을 때의 화면을 보여줍니다.

useHistory

let history = useHistory();

앞으로 가기 , 뒤로가기 기능들을 쉽게 구현할 수 있는 History API 입니다.
useHistory() 를 선언하고 변수에 저장 후 사용합니다.

<div onClick="{()=>{history.goBack()}}">뒤로가기</div>

history.goBack() 이런식으로 작성하면 div를 클릭했을 때, 뒤로가기 기능을 실행합니다.

Styled Components

css 클래스 네임 중복을 피하기 위해 사용하는 라이브러리 입니다.

let Box = styled.div`
    padding: 20px;
`;

변수에 저장해서 사용하며, styled. 뒤에는 h4 , span , p 등 태그명이 들어가고,
벡틱기호 안에는 css를 적으면 됩니다.

<Box>box</Box>

컴포넌트 만들 때처럼 앞글자는 대문자로 시작합니다.

let Tit = styled.h4`
    font-size: 25px;
    color: ${props => props.color};
`;

<Box>ssss
    <Tit color={'#000'}>wwww</Tit>
</Box>

여러개의 비슷한 UI가 있다면, props 로 작성할 수도 있습니다.

UseEffect

useEffect : 컴포넌트가 Mount , Update 될 때 특정코드를 실행합니다.

Mount : DOM 객체가 생성되고 브라우저에 나타나는 것
Update : props 또는 state 값 변경, 부모 컴포넌트가 리렌더링 될 때

특정 state가 변경될 때만 실행

useEffect(() => {

},[ state이름] );

만약, [ ] 처럼 공백일경우 컴포넌트가 업데이트 되건말건 영원히 실행이 안됩니다. 즉,
페이지를 들어왔을 때 최초로 한번만 실행하고 이후로는 실행을 하지 않습니다. (일회용)

return

return () => clearTimeout(timer);

return 으로 컴포넌트가 사라질 때 이벤트를 줄 수 있습니다. 위 코드는 컴포넌트가 사라지면 timer 라는 변수를 제거한다는 의미입니다. (여기서 clearTimeout은 자바스크립트 내장함수입니다.)

2초뒤에 사라지는 토스트 팝업 만들기

let [myAlert, setMyAlert] = useState(true);

처음에 보여지다가 2초뒤에 사라지는 거니까, 처음 state값은 true로 저장합니다.

useEffect(() => {
    let timer = setTimeout(() => {
        setMyAlert(false);
    }, 2000);
    return () => clearTimeout(timer);
},[myAlert]);

자바스크립트 내장함수인 setTimeout 을 사용하여 2초 뒤에 myAlert state의 값을 false로 바꿔서 2초뒤에 사라지게 만들어줍니다.