안녕하세요
리액트 - route, styled-components특징, lifecycle, useEffect 본문
- 페이지 앞뒤로 이동하려면 navigate(1), navigate(-1)
- 여러 여러 유사한 페이지 만들 때 Nested Routes:
- 존재하지 않는 모든 Route에 404 페이지 출력<Route path="*" />
- 배포할 때 기본 주소는 basename={process.env.PUBLIC_URL}
- 데이터 props로 전달할 때 헷갈리게 하지 말자
- styled-components 장점
- styled-components 단점
- params와 일치하는 id 가진 상품 찾기 Array.find():
- 컴포넌트의 lifecycle
- useEffect 사용하는 방법
- useEffect에도 return을 쓸 수 있다
- dependency 역할
- useEffect는 여러개 사용 가능하다
- css className으로 트랜지션 주기
- 리액트 automatic batching 기능
npm install react-router-dom@6
페이지 앞뒤로 이동하려면
navigate(1), navigate(-1)
navigate(n) : 앞으로 n 페이지 이동
navigate(-n): 뒤로 n 페이지 이동
<Nav.Link
onClick={() => {
navigate("/");
}}
>
MainVisual
</Nav.Link>
여러 여러 유사한 페이지 만들 때
Nested Routes
Route를 여는 태그, 닫는 태그로 만들고 그 안에 Route를 넣어 중첩 라우트를 사용하면 보기 좋다
어디에 보여줄 지는 <Outlet></Outlet> 태그를 Component안에서 원하는 곳에 위치하면 된다.
<Route path="/about" element={<About />}>
<Route path="location" element={<div>위치</div>} />
<Route path="membership" element={<div>멤버쉽</div>} />
</Route>
const About = () => {
return (
<>
<div>어바웃</div>
/about/location에서는 about과 location이, /about/membership 에서는 about과 membership이 보인다.
<Outlet></Outlet>
</>
);
};
존재하지 않는 모든 Route에 404 페이지 출력
<Route path="*" />
<Route path="*" element={<div>Error: 404</div>} />
배포할 때 기본 주소는
basename={process.env.PUBLIC_URL}
root.render(
<React.StrictMode>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<App />
</BrowserRouter>
</React.StrictMode>
);
데이터 props로 전달할 때 헷갈리게 하지 말자
데이터를 전달할 때부터 원본 데이터의 형태를 그대로 사용하여
el같은 못난 변수명으로 헷갈리지 않게 원본데이터 변수명 그대로 가져다 data[index] 형태로 처리한다.
<Card key={shoes[index].id} shoes={shoes[index]} index={index} />
styled-components 장점
1. 스타일이 다른 js 파일로 오염되지 않음
(css에서는 오염시키지 않으려면 App.module.css 처럼 module을 파일명에 추가한다.)
2. 필요한 페이지의 css만을 불러와 페이지 로딩시간 단축
3. JS문법 활용 가능.
(주의할 점은 오타나 세미콜론같은 것은 eslint에서 잡아주지 못하므로 오타 주의)
const BlueButton = styled.button`
background: ${(props = "#fff") => props.background};
color: ${(props) => (props.background === "#369" ? "#fff" : "#000")};
`;
4. 기존 스타일 복사 가능
const BiggerBlueButton = styled(BlueButton)`
padding: 20px;
`;
styled-components 단점
1. 일반 컴포넌트와의 구분이 어렵다.
2. 다른 파일에 있는 스타일을 import해서 쓰는 방식이면 css import하는 거나 마찬가지다.
3. styled-components 문법을 모르는 사람과 협업이 어렵다.
=> 특정 파일 내에서 변수를 이용하는 등 js 문법이 필요한 상황에만 쓰고, 편하게 자동완성 해주는sass를 쓴다.
params와 일치하는 id 가진 상품 찾기
Array.find()
const foundShoesData = shoes.find((el) => {
return el.id === parseInt(params.id);
});
컴포넌트의 lifecycle
1. 페이지에 나타남 (mount)
2. 업데이트 됨 (update)
3. 제거 됨 (unmount)
=> 각각의 라이프 사이클에 원하는 기능을 수행시킬 수 있다.
과거 class로 Component를 생성했을 때는
class ComponentName extends React.Component {
componentDidMount(){
생겨날 때 실행되는 코드
}
componentDidUpdate(){
업데이트 될 때 실행되는 코드
}
componentWillUnmount(){
사라지기 직전에 실행되는 코드
}
}
useEffect 사용하는 방법
useEffect 안의 코드는 html 렌더링 후에 동작한다.
그래서 언제 쓰면 좋은가? => 오래걸리는 것
1. 이용자가 보이는 화면을 다 그린 뒤, 오래 걸리는 연산을 수행하도록 할 때
2. 서버에서 데이터를 가져올 때
3. setTimeout 쓸 때
mount 될 때 한 번 실행된다.
useEffect(() => {
setTimeout은 보통 변수에 저장하여 실행시킨다.
const changeIntoFalse = setTimeout(() => {
setIsNoticeVisible(false);
}, 2000);
useEffect에도 return을 쓸 수 있다
clean up function이라고 불리는데 역할을 보면 이름 잘 지은 것 같다.
(만들어질 때) mount 시에는 실행되지 않는다.
useEffect 실행 전과 (update)
삭제될 때 실행된다. (unmount)
그래서 언제 쓰는가?
1. clearTimeout으로 기존 코드를 정리할 때 사용
return () => {
clearTimeout(changeIntoFalse);
2. 데이터 요청을 할 때 에러가 발생하지 않도록 기존 데이터 요청을 제거해주면 좋다.
};
dependency 역할
[]와 같이 비워놓으면 mount될 때 1회 실행한다.
[isNoticeVisible] 와 같이 state를 넣으면 dependency안의 state가 update될 때마다 실행한다.
}, [isNoticeVisible]);
useEffect는 여러개 사용 가능하다
fadeIn을 페이지 전체에 넣기 위해 useEffect를 검색해보니
useEffect는 한 컴포넌트 안에 여러개를 사용하여도 각각 동작하도록 되어 있다.
useEffect(() => {
setFadeIn("fadeIn");
return () => {
setFadeIn("");
};
}, []);
css className으로 트랜지션 주기
opacityZero클래스에 opacity: 0
fadeIn클래스에 opacity: 1, transition: 0.5s
useEffect로 특정 state가 변할 때 setTimeout으로 붙였다 떼주면 된다.
리액트 automatic batching 기능
setTimeout을 써야하는 이유는 리액트 automatic batching 기능 때문으로
여러 state가 업데이트 될 때마다 수 차례 렌더링을 하게 되는데
state의 변화가 다 끝나고 최종적으로 유지되어야 할 상태가 되면 렌더링을 1회 수행하도록 하여 성능을 높인다.
const [fadeIn, setFadeIn] = useState("fadeIn");
useEffect(() => {
setTimeout(() => {
setFadeIn("fadeIn");
}, 50);
return () => {
setFadeIn("");
};
}, [tabVisibleIndex]);
return <div className={`opacityZero ${fadeIn}`}>
{[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tabVisibleIndex]}
</div>;
};
'스터디 > 코딩애플' 카테고리의 다른 글
| 리액트 - 로컬 스토리지 : 캐시 (0) | 2022.12.23 |
|---|---|
| 리액트 - Redux Toolkit을 써보자 (0) | 2022.12.21 |
| 리액트 - 기초 문법과 지식 (0) | 2022.12.20 |
| [OOP] 파라미터 default값, 스프레드 ...rest (0) | 2022.11.29 |
| [OOP] 배열깊은복사, 스프레드연산자 (0) | 2022.11.29 |