본문 바로가기

Library | Framework22

[React] React Router 사용하기 서론 저번 내용보단 쉬웠지만, 내가 공부중인 책과 현재 React Router v6이차이가 있어서 구글링하면서 공부해야했다. 생활코딩 아주조코.. ㅎ Routing이란?? 사용자가 접속 중인 URL에 따라 UI를 달라지게 하는 것이다. 매우 유용하게 쓰인다고 한다. React Router를 써보자! 일단 새로운 프로젝트를 만들고, index.css의 내용을 모두 지운다. 모든 코드는 index.js에서 구현될 예정이므로 주의할 것! import { BrowserRouter, Route, Routes} from 'react-router-dom'; 먼저 Router를 import해준다. 원래 React router는 그냥 써도 됐는데, router v6이 되면서 routes를 꼭 쓸 수 밖에 없어졌다. 이건.. 2022. 1. 17.
[React] 함수형 컴포넌트로 라이프 사이클 구현하기 - useEffect hook 서론 이번 글의 내용은 나도 이해를 잘 못한 부분이라 설명이 난해할 수 있다. 라이프사이클이란 생명주기를 뜻하는데, 쉽게 말하면 컴포넌트가 렌더링되고 삭제되는 과정을 뜻한다. 참고로 이때까지 만든 컴포넌트들은 라이프사이클이 없는 컴포넌트들이었다... 무튼 만들어보자! 클래스형으론 어떻게 만들까? 클래스형으로 만들 때에는 componentWillMount -> render -> componentDidMount - > componentWillUnmount 메서드들이 이러한 순서를 가진다. * mount : 어떤 컴포넌트가 생성된다. = 화면에 그려지다. componentWillMount라는 메서드를 구현해서 그 안에 필요한 코드를 가져다 놓는 식으로 마운트되기 직전에, 즉 render 메서드가 호출되기 전에.. 2022. 1. 15.