Web Front-End/React (26) 썸네일형 리스트형 React 주요 개념 1. 리액트에서 DOM을 직접 수정하지 않는다. - 과거에는 DOM을 쉽게 선택할 수 있도록 jQuery를 주로 사용하였고 대부분의 개발자들의 수고를 덜어준건 사실이다. 하지만 웹프론트-백엔드를 영역이 생기면서 기존 DOM을 Select해서 직접 데이터를 바인딩하는 방식이 점차 복잡해지고 코드가 뒤섞여지므로써 유지보수의 비용이 많이 발생하였다. 웹 프론트의 발전을 거듭하면서 탄생한 리액트에서는 DOM을 직접수정하는게 아니라 리액트가 갖고 있는 상태값을 이용하여 UI를 그린다. - 리액트는 화면을 그리는 모든 코드를 컴포넌트 함수에 선언형으로 작성하도록 하여 UI 데이터가 변경되면 컴포넌트 함수를 이용해서 화면을 자동으로 갱신한다... 이게 되기 때문에 더 이상 jQuery가 필수가 아니게 되었고 리액트가.. Typescript React 프로젝트 생성 Typescript React 프로젝트 생성 1. 신규 생성 yarn create react-app --template typescript 2. 기존 프로젝트에 타입스크립트 적용 yarn add typescript @types/node @types/react @types/react-dom @types/jest 참조 React-Redux, Redux, Redux-logger, Redux-thunk, Redux-saga 정리 리액트에서 하나의 앱에는 하나의 Store가 존재한다.(Vuex와 동일) Store의 state는 읽기전용 기존 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해줘야한다. 리듀서는 이전 상태와 액션 객체를 파라미터로 받고 언제나 새로운 상태의 객체를 만들어서 반환해야한다. 똑같은 파라미터로 호출된 리듀서는 언제나 똑같은 결과값을 반환해야한다. Redux 주요 기능 createStore: 리액트 프로젝트에서 스토어를 생성시켜준다. combineReducer: 모듈화된 리듀서들을 하나의 리듀서로 통합시켜준다. applyMiddleware: 미들웨어를 사용할 수 있게 해준다. React-redux 주요 기능 Provider: 리액트 앱의 컴포넌트에서 리덕스 스토어에 Hook을 통해 접근가능 use.. React - 로컬에서 build 후 서버띄우기 개발 후 프로덕션 버젼으로 확인이 필요한 경우가 있다. 원래대로라면 웹팩 컴파일된 빌드 파일을 웹 서버의 DocRoot에 배포해서 테스트해야하지만 vscode에서 간단히 프로덕션버젼으로 확인 가능한 방법이 있다. serve 라는 패키지를 사용해야하는데 $yarn global add serve $npx serve 로 실행하면 잘된다. React 리덕스 리덕스는 리액트에서 가장 많이 사용하는 상태관리 라이브러리이다. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 따라서, 전역 상태를 관리할때 굉장히 유용하다곤... 하지만 전역상태기 때문에 남발하면 혼란을 가중 시킬 수도 있다고 생각한다.!! 여튼 단순 전역 상태 관리면 Context API만으로도 충분하고 프로젝트 규모가 커지면 리덕스를 사용하는게 좋다고한다. 또한 개발자 도구도 지원하며 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수있게 해준다고 한다. ## 설치방법 $ yarn create react-app $ cd $ yarn add redux react-redux 리덕스를 주로 사용하는 패턴으로는 프리젠테이셔널 컴포넌트, 컨테.. React Function as a child or Render Props 아래 코드의 Cumsumer 사이에 중괄호를 넣어 함수를 넣어준 것 처럼 컴포넌트의 자식에 있어야할 자리에 JSX나 문자열이 아닌 함수를 전달하는 패턴을 "Function as a child" 또는 "Render Props" 라고 불린다. const ColorBox = () => { return ( {(value) => ( )} ); }; React Context API 1. Context API Context API는 리액트 프로젝트에서 전역으로 사용할 데이터가 있을 때 유용한 기능 Vue에 Vuex가 존재하는 것처럼 리액트에서는 Redux, MobX 같은 상태 관리 라이브러리를 사용하여 전역 상태 관리 작업을 처리한다. v16.3 업데이트 이후 Context API가 많이 개선되었기 때문에 별도의 라이브러리를 사용하지 않아도 전역 상태를 손쉽게 관리할 수 있다. 음.. Vue의 EventBus 같은 기능인가?? 새로운 Context를 만드려면 react의 createContext 함수를 사용해야하고 파라미터로는 해당 Context의 기본 상태를 지정한다. 2. Customer Customer를 통해 props 같은 상태 값을 가져온다. const ColorBox = .. React Router 적용 1. 프로젝트 생성(미 생성시) $ yarn create react-app $cd $yarn add react-router-dom 리액트 라우터를 설치할 때는 yarn을 이용하여 react-router-dom을 설치해야한다. 2. Router 적용 src/index.js 파일에 react-router-dom에 내장 되어 있는 BrowserRouter라는 컴포넌트로 감싸야한다. BrowserRouter는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해줌 import React from "react"; import ReactDOM from "react-dom"; impor.. 이전 1 2 3 4 다음
