반응형
반응형
1. 라우팅이란 ? 웹앱에서의 라우팅은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는것을 의미한다. 여기서 여러페이지로 구성된 웹페이지에서 페이지별로 컴포넌트를 분리해가며 프로젝트를 관리하기위해 필요한것이 라우팅 시스템이다. 우리는 React-Router 를 사용해서 예제를 해보자 2. 싱글 페이지 어플리케이션이란? 말그대로 한개의 페이지로 이루어진 어플리케이션 이다. 기술적으로는 한페이지만 존재하는것이지만, 사용자는 여러 페이지가 존재하는것처럼 느낀다. React-Router 는 링크를눌르면 브라우저에 History API 를 사용해 주소창 값만 변경하고 기존 페이지의 웹 어플리케이션은 유지 하면서 라우팅설정에따른 다른 페이지를 보여주는 방식이다. 3. 리액트 라우터 적용 및 사용법 3.1 프..
현재 진행하고있는 프로젝트 에 라우트 적용해보기 현재 redux 를 사용하고있는 todo 프로젝트에 라우터를 적용하여 todo를 클릭했을때 ? 상세 페이지를 띄우게 만들어보자. 이과정을 하게되면서 문제를 해결하는 과정도 기록해보자. 1. 프로젝트에 라우터 라이브러리 설치 $ npm install react-router-dom2. 프로젝트 라우터 적용 루트 디렉토리에 index.js 파일에 react-router-dom 내장 컴포넌트 BrowerRouter 컴포넌트를 사용하여 감싸준다. 이 컴포넌트는 간단하게 HTML5 의 History API 를 사용해 주소경로에 관련된 정보를 리액트 컴포넌트에서 사용할수있도록 해준게하는 컴포넌트 이다. 사용해보면서 이해해보자 index.js import React fr..
리덕스 ? 리액트에서 사용률이 높은 상태관리 라이브러리이다. 상태관련 로직들을 다른파일로 분리하여 효율적으로 관리 할수있으며 글로벌 상태 관리도 쉽게 할수있다. Context API 와 useReducer Hook 을 사용해서 개발하는 흐름과 리덕스는 굉장히 유사 하다. Context API 와 차이점 ? 1. 미들웨어 리덕스에는 미들웨어라는 개념이 있다. 미들웨어를 통해서 액션 객체가 리듀서에서 처리되기 전에 원하는 작업을 수행할수있도록 만들수있다. 특정 조건에따라 액션이 무시됨 액션을 콘솔에 출력하거나 , 서버에 로깅할수있음 액션이 디스패치됐을대 이를 수정해서 리듀서에 전달할수있음 특정 액션이 발생했을때 다른액션을 발생하게할수있음 특정 액션이 발생했을때 특정자바스크립트 함수를 실행시킬수있다. 주로 비..
리덕스 ? 리액트에서 사용률이 높은 상태관리 라이브러리이다. 상태관련 로직들을 다른파일로 분리하여 효율적으로 관리 할수있으며 글로벌 상태 관리도 쉽게 할수있다. Context API 와 useReducer Hook 을 사용해서 개발하는 흐름과 리덕스는 굉장히 유사 하다. Context API 와 차이점 ? 1. 미들웨어 리덕스에는 미들웨어라는 개념이 있다. 미들웨어를 통해서 액션 객체가 리듀서에서 처리되기 전에 원하는 작업을 수행할수있도록 만들수있다. 특정 조건에따라 액션이 무시됨 액션을 콘솔에 출력하거나 , 서버에 로깅할수있음 액션이 디스패치됐을대 이를 수정해서 리듀서에 전달할수있음 특정 액션이 발생했을때 다른액션을 발생하게할수있음 특정 액션이 발생했을때 특정자바스크립트 함수를 실행시킬수있다. 주로 비..
useEffect ? 컴포넌트가 렌더링될때 특정작업을 실행할수있도록 하는 훅이다. 클래스형 컴포넌트에서는 생명주기 메소드를 사용하여 이용할수있는데 함수형 컴포넌트에서는 useEffect를 사용하면된다. useEffect[ 함수 , 의존성배열] 첫번째인자 : 함수 리액트는 렌더링 이후에 실행할 함수( useEffect 첫번째 인자 ) 를 가지고있다 DOM 업데이트 이후 불러내게된다. 만약 첫번째 인자 함수에서 return 하게되면 그 함수가 컴포넌트 unmount 될때 실행되게된다. → 이것을 이용해서 cleanUp 함수를 작성할수도있다 두번째인자 : 의존성 배열 배열의 형태로 특정한 값이 변경될때 첫번째인자 즉 useEffect 함수를 실행시키고싶을경우 그값을 넣어준다. 예를들어 input 값안에 들어있..
ref ? 컴포넌트 라이프사이클내 유지되며, 변경가능한 변수이고 값이 변할때 렌더링이되지 특징을 가지고있으며 주로 DOM 엘리먼트에 접근하여 컴폰너트의 전체 렌더링과 관계없는 작업을 할때 유용하게 사용된다. ref 와 state ref 의 특징을보면 state 와 유사한부분이있다. state 는 컴포넌트 라이프 사이클내에서 유지가되며 , 변경가능한 변수이고 , 값이 변할때 렌더링이된다는 특징이있다. 간단하게 리렌더링이 필요한 값을 다룰때는 state 를 , 아닐때는 ref를 사용한다고 보면 된다. import React, { useRef, useState } from "react"; import { Card } from "../UI/Card"; import classes from "./AddUser.mo..