코드코코

0. NodeJS 와 NPM 이 설치 되었는 지 확인 $ node -v $ npm -v 1. react app을 생성할 수 있는 명령어 설치 $ npm -g install create-react-app 2. create-react-app 버전 확인 $ create-react-app --version 3. react app 생성해보기 $ create-react-app 4. 생성한 react-app 실행해보기 $ cd hello-react : 생성된 app의 경로로 들어간다 $ npm start -끝-

1. history 객체 - history 객체는 라우터로 사용된 컴포넌트에 match, location과 함께 전달되는 props 중 하나. - 이 객체를 통해 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출 할 수 있음. - 다른 페이지로 이탈하는 것을 방지해야 할 때 활용 2. withRouter 함수 -Higher-order Component -라우트로 사용된 컴포넌트가 아니어도, match,location,history 객체를 접근할 수 있게 해 줌. - 현재 자신을 보여주고 있는 라우트 컴포넌트를 기준으로 match가 전달됨. 3. Switch 컴포넌트 - 여러 Route를 감싸서 그 중 일치하는 단 하나의 라우터만을 렌더링. - 모든 규칙과 일치하지 않을 때 보여 줄 Not Found..

immer 라이브러리 - 불변성에 신경 쓰지 않는 것처럼 코드를 작성하되 불변성 관리는 제대로 해주는 것 - 단순히 깊은 곳에 위치하는 값을 바꾸는 것 외에 배열을 처리할 때에도 쉽고 편함. - 객테 안에 있는 값을 직접 수정하거나, 배열에 직접적인 변화를 일으키는 push, splice 등의 함수를 사용해도 무방. import produce from 'immer'; //produce(수정하고 싶은 상태, 상태를 어떻게 업데이트 할지 정의 하는 함수) const nextState = produce(originalState, draft => { //바꾸고 싶은 값 바꾸기 //produce 함수가 불변성을 유지를 대신해 주면서 새로운 상태를 생성 draft.somewhere.deep.inside = 5; })

라이프사이클 메서드 - 모든 리액트 컴포넌트에는 라이프사이클이 존재 - 페이지에 레더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남. - 클래스형 컴포넌트에서만 사용가능 - 함수형 컴포넌트에서는 Hooks기능을 사용하여 비슷한 작업을 처리. 라이프 사이클 흐름 마운트(mount) : DOM이 생성되고 웹 브라우저상에 나타나는 것. 1. constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 2. getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 3. render : UI를 렌더링하는 메서드 4. componentDidMount: 컴포넌트가 웹 브라우저상에 나타나 후 호출하는 메서드 업데이트(update)..

//라우터 관련 라이브러리 설치 yarn add react-router-dom //BrowserRouter 불러오기 import { BrowserRouter } from 'react-router-dom'; //index.js ReactDOM.render( //BrowserRouter컴포넌트로 묶어주기 , document.getElementById('root') ); Route: 특정 주소에 컴포넌트 연결하기 Link: 누르면 다른 주소로 이동시키기 - 리액트 라우터를 사용할 때 a태그 사용금지 - a 태그의 기본적인 속성은 페이지를 이동시키면서, 페이지를 아예 새로 불러오는 것이다. a 태그의 속성때문에 앱이 지니고있는 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게된다. - ..

Sass - pre-pocessor이다. pre-processor는 CSS 문서의 양을 효율적으로 처리하고 관리해 주는 통합적인 역할을 수행해주는 것을 의미. //Sass 를 CSS로 변환해주는 역할 yarn add node-sass - 변수 선언가능 : $변수명 - 함수 사용가능 : 함수명() - 반복이 되는 코드는 재사용 가능 : @mixin기능 - ...rest props 사용 : 지정한 props 를 제외한 값들을 rest 라는 객체에 모아주고, 태그에 {...rest} 를 해주면, rest 안에 있는 객체안에 있는 값들을 모두 태그에 설정 해줌. import React from 'react'; import classNames from 'classnames'; import './Button.scs..

에러내용 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 상황 설명 yarn add node-sass 로 최신 버전을 설치 후, yarn start 해보니 아래 문구가 나와서 Node Sass version 6.0.0 is incompatible with ^4.0.0 || ^5.0.0. yarn remove node-sass 후 yarn add nide-sass@5 를 설치하고 yarn start를 한 상황 에서 해당 에러가 등장. 해결 yarn add react-scripts 설치 원인 react-scripts가 제대로 설치되어 있지 않아서 발생

import * as React from 'react'; (* as 를 하는 이유) -export default 없는 애들이나 module.exports로 된 애들은 * as로 해야 합니다. * as는 자바스크립트에도 존재하는 문법입니다. 모든 export들을 모아서 하나의 변수 안에 모아줍니다. -import * as React from 'react';하면 React.useEffect, React.useCallback 이렇게 접근 가능합니다. 출처 https://www.inflearn.com/questions/110639 import * as React from 'react' 질문있습니다. - 인프런 | 질문 & 답변 * as를 붙이는 이유가 단순히 리액트는 export default가 없어서 붙이는 ..