ContextAPI 개요 react는 16.3 버전부터 정식적으로 ContextAPI를 지원하고 있다. 일반적으로 부모와 자식간 props를 전달해 state를 변화시키는 것과는 달리 ContextAPI는 컴포넌트 간 간격이 없다. 즉, 컴포넌트를 건너뛰고 다른 컴포넌트에서 state, function을 사용할 수 있다. 또한 redux의 많은 어려운 개념보다 context api는 Provider, Consumer, createContext 개념만 알면 적용할 수 있다. ContextAPI는 컴포넌트안에서 로그인데이터 웹 내 사용자의 설정파일 테마 언어 등 전역적으로 공유되는 데이터로 사용하면 좋다. Context React에서 props와 state는 부모 컴포넌트와 자식 컴포넌트 또는 한 컴포넌트 ..
useReducer useReducer의 역할 useReducer는 State(상태)를 관리하고 업데이트하는 Hook인 useState를 대체할 수 있는 Hook이다. 다시 말해, useReducer는 useState처럼 State를 관리하고 업데이트 할 수 있는 Hook이다. useReducer는 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해준다는 것이다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가능하게 함으로써 코드의 최적화를 이루게 해준다. 아래의 두 코드를 비교해보자(State 업데이트 로직이 어디에 위치했는지 큰 구조만 살펴볼 것) useState를 사용한 경우 : 컴포넌트 내부에 ..
공부하면서 얻은 Hooks Tip! Hooks Pattern componentDidMount만 하고싶은 경우 useEffect(() => { // code }, []); 두 번째 인자(배열)의 값이 없어서 componentDidMount의 경우에만 실행된다. 첫 렌더링 때 실행된다고 생각하면 된다. componentDidUpdate만 하고싶은 경우 const mounted = useRef(false); useEffect(()=>{ if(!mounted.current){ mounted.current=true; }else{ // code } },[]) 첫 렌더링 때 실행되는 componentDidMount를 플래그변수로 막고 그 이후(componentDidUpdate)에 실행되는 코드가 실행된다. 클래스와 ..
리액트 아이콘 리액트의 라이브러리로 수 많은 아이콘을 컴포넌트 형식으로 사용 할 수 있다. 터미널에서 npm을 사용해 설치한다. npm install react-icons --save React icon에서 원하는 아이콘을 찾아서 불러 올 수 있다. React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons ..
리액트 환경 프로젝트 Github 배포 리액트 환경에서 생성한 SPA의 state, JSX, , props 같은 문법들은 브라우저가 해석할 수 없어 그대로 배포할 수 없다. 이런 문법들을 CSS JS HTML 문법으로 바꿔주는 작업이 필요하다. 이러한 작업을 컴파일(comfile) 또는 빌드(build) 라고 한다. 웹팩이 이러한 컴파일이나 빌드의 기능을 처리한다. gh-pages 설치 배포하고자 하는 react 앱의 root 에서 터미널을 통해 gh-pages 를 설치해준다. npm i gh-pages 설치가 정상적으로 완료됐다면 package.json 의 dependencies 에 gh-pages 가 생성된다. App()컴포넌트에 프로퍼티 추가 App()에서 BrowserRouter에 basename..
React Router 리액트에서 SPA(Single Page Application)을 제작 하기 위해서는 Router(라우터)라는 라이브러리가 필요하다. 한 개의 페이지에서 라우터를 이용해서 여러 개의 페이지를 만들 수 있는 것이다. 설치 터미널로 npm을 통해서 라우터를 설치한다. npm install react-router-dom 라우터의 기본 사용법 import 로 'react-router-dom' 에서 { BrowserRouter, Routes, Route } 를 불러온다. BrowserRouter > Routes > Route 의 구조로 이루어 진다. Route 에는 path 와 element 속성으로 이루어져 있는데, path 는 페이지 URL의 맨 뒤 경로를 나타내고 element 에는 p..
함수 컴포넌트 함수 컴포넌트란 함수를 기반으로 작성하는 컴포넌트를 말한다. 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드를 짤 수 있고, 함수 프로그래밍을 할 수 있게 해준다. 함수 컴포넌트의 Hook이라는 기능으로 클래스형 컴포넌트의 생명주기함수와 같은 기능을 사용할 수 있다. 리액트 공식 문서에서도 함수 컴포넌트 + Hook 조합을 추천하고 있다. Hooks 리액트의 Hook 은 함수 컴포넌트에서 React state와 라이프사이클 기능을 “연동(hook into)“할 수 있게 해주는 함수이다. Hook은 class 안에서는 동작하지 않고 class 없이 React를 사용할 수 있게 해준다. Hook의 개요 리액트 훅을 도입하게 된 목적은 여러가지가 있다. 컴포넌트에서 상태관련로직을 사용할 때 H..
Life Cycle 모든 리액트 컴포넌트에는 생명주기(Life Cycle)가 존재한다. 컴포넌트는 ‘생성(mounting) -> 업데이트(updating) -> 제거(unmounting)’ 의 생명주기를 갖는다. 생명주기에 맞게 어떤 작업을 처리해야 하는지에 따라 불필요한 업데이트를 방지할 수 있다. 리액트의 클래스형 컴포넌트는 라이프사이클을 활용하고, 함수형 컴포넌트는 Hook을 사용한다. Lift Cycle(생명주기) Mount(생성) 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. constructor() : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메소드 this.props this.state 에 접근할 수 있으며 리액트 요소를 반환한다. setState 를 사용..
React 설치 및 프로젝트 생성 node.js 설치 안정적인 왼쪽의 LTS버전을 설치한다. React설치를 위한 npm 은 node.js 설치 시 함께 설치된다. 프로젝트용 폴더 생성 프로젝트용 폴더를 생성하고, 우클릭을 통해 터미널로 폴더를 연다. 터미널에서 npx create-react-app 프로젝트명 을 입력하고 Enter를 치면 폴더 안에 프로젝트명으로 된 폴더가 생성된다. (mac 기준 오류 발생 시 sudo npx create-react-app 프로젝트명 입력 후 Enter를 치고 비밀번호를 입력하면 된다.) npx create-react-app 프로젝트명 폴더별 역할 코드 에디터로 생성된 프로젝트 폴더를 열면 아래 사진과 같이 폴더와 파일들이 생성된다. node_modules 프로젝트 구..
개발용어 라이브러리(Library) 간략 설명: 프로그램 제작 시 필요한 기능 비교 설명: 자동차 바퀴, 자동차 헤드라이트, 자동차 에어백 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class 나 Function 으로 만들어졌다. 사용 여부는 개발자(코드 작성자)의 선택 사항이며 새로운 라이브러리 제작 시에도 엄격한 규칙이 존재하지 않다. 제작 의도에 맞게 작성하면 된다. 라이브러리 예시 재사용하기 쉽게 버튼, 테이블 같은 구성 요소를 호출해서 쓸수 있도록 분리해둔 그래픽 사용자 인터페이스(Graphical user interface , GUI) 객체지향 프로그래밍(object-oriented programming, OOP)은 기본적으로 ..
