✨ Front-end/리액트(React)15 [React] Router -2 Nested(중첩) Router 및 Param, Navigate Nested Router 태그 안에는 태그가 존재할 수 있다. 이 경우 내의 페이지 안에 하위 경로를 설정해 지정할 수 있는데, 이것을 Nested Router라고 한다. App.js 내에 를 표시하고 싶을 경우 이라는 태그를 사용해 활성화 시킬 수 있다. IndexPage.js home이나 hello 경로로 들어갔을 때 , App.js에서 분명 IndexPage 말고도 아래에 Route가 두개 더 있어서 떠야하는데 안뜬다. 이 없어서 그렇다. Outlet을 추가해야 중첩 Router를 사용할 수 있어 위와 같이 아래에 있던 도 추가 된 것을 볼 수 있다. ReactRouterHooks React Router에는 여러 hook들을 제공하는데, 그 중 3가지 useParams - URL 파라미터 정보를 가.. 2023. 9. 22. [React] Router -1 세팅 및 style 적용 방법 Link, NavLink Router란? 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다. npm install react-router-dom router를 쓰기 위해선 설치해줘야 할 코드가 위에 있다. 이후 npm start를 통해 페이지를 띄우자. BrowserRouter.js HTML 삽입 미리보기할 수 없는 소스 위 js파일을 하나 만들어주고, component > Hello.js, Home.js component 폴더를 만든 후 그 경로 안에다가 Hello와 Home js를 만들어 content 부분을 넣어준다. App.js react-router-dom에서 BrowserRouter, Route, Routes.. 2023. 9. 22. [React] useReducer 사용 예제, useState와의 차이점 useReducer란? 복잡한 상태 관리를 간편하게 처리하기 위해 사용되는 함수이다. useReducer를 사용하면 컴포넌트의 상태를 관리하고 상태를 변경하는 로직을 더 구조적으로 작성할 수 있다. const [state, dispatch] = useReducer(reducer, initialState); state: 현재 상태를 나타내는 값 dispatch: 상태를 변경할 때 사용하는 함수 reducer: 상태를 변경하는 로직이 담긴 함수 initialState: 초기 상태를 설정하는 값 useReducer는 보통 컴포넌트에서 사용할 상태 관리 로직을 별도의 함수인 reducer에서 처리하도록 하는데, 이러한 방식은 상태 관리 로직을 컴포넌트 밖에 둠으로써 코드의 재사용성과 유지보수성을 높인다. use.. 2023. 9. 22. [React] useEffect의 개념 및 실행 시점의 차이 및 사용예제 useEffect란? 함수형 컴포넌트에서 side effect를 수행하고, 컴포넌트의 생명주기에 특정 작업을 연결하는 Hook이다. 이는 컴포넌트가 렌더링될 때, 업데이트될 때, 혹은 제거될 때 특정 작업을 수행하게 해준다. ex1) 사용예제 HTML 삽입 미리보기할 수 없는 소스 결과화면 첫 번째 렌더링 시에 "컴포넌트 생성"이 찍히는 것은 useEffect의 첫 번째 실행이다. 해당 useEffect는 컴포넌트가 마운트될 때 실행된다. 두 번째로 "컴포넌트 사라짐"이 찍히는 것은 컴포넌트가 다시 렌더링되어 언마운트되었을 때의 작업이다. 이전에 생성된 컴포넌트 인스턴스가 제거되고, 새로운 컴포넌트 인스턴스가 생성되어 언마운트 작업이 실행된다. 마지막으로 "컴포넌트 생성"이 다시 찍히는 것은 두 번째 렌.. 2023. 9. 21. 이전 1 2 3 4 다음
