프로젝트에 라우터 적용 $ yarn add react-router-dom 명령어 실행하여 라이브러리 설치 index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') ); BrowserRouter라는 컴포넌트를 이용하여 App를 감싸면 라우터가 적용이 된다. 로 특정 주소에 컴포넌트 연결 Route 컴포넌트를 사용하면 어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여줄지 정의할 수 있..

1. useMemo 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다. Memoization된 값을 return 해주는 hook이다. memoization이란? 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술 UseMemo 사용법 function Component({a, b}) { const result = compute(a, b) return {result} } 만약 위에서 복잡한 연산을 수행하는 compute라는 함수가 있을때 사용할 수 있다. function Component({a, b}) { const result = useMemo(() => compute(a, b), [a..

리액트에서 불변성을 지키는 이유 불변성이란 사전적 의미로 값이나 상태를 변경할 수 없는 것을 의미한다. React가 불변성을 지키는 이유는 부모 컴포넌트가 re-rendering 되거나 State, Props 에 변화가 일어난 경우 렌더링이 일어나게 된다. 참조 타입(array 등)에서 객체나 배열의 값이 변할 때 원본 데이터가 변경 되어서 이 원본 데이터를 참조하고 있는 다른 객체에서 오류가 발생 할 가능성이 있기 때문에 프로그래밍의 복잡도가 올라간다. 리액트에서 화면을 업데이트할 때 이전 값과 비교해서 변경된 사항을 확인한 후 업데이트 하기때문에 불변성을 지켜줘야 합니다. 불변성을 지키는 방법 참조타입을 변경하는 것이 아닌, 새로운 배열을 반환하는 메소드를 사용 스프레드 문법, map, filter,..

[React] Props 와 State Props란? Props는 Properties의 줄임말이다. 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터등을 전달하는 방법 Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다. (변경하고 싶으면 부모 컴포넌트에서 state를 변경 시켜야한다.) Props의 사용 //App.js const App = () => { return //Text.js const Text = ({text}) => { return {text} } 위의 코드는 부모 컴포넌트(App)에서 자식 컴포넌트(Text)에 Props를 사용해서 “Hello world!” 라는 문자열 데이터를 전달했다. 여러개의 Props 와 defaultProps 부모 컴포넌트에서..

Hooks는 무엇? Hooks는 React 16.8버전에 새로 추가된 기능이다 기존에 리액트에서 쓰던 클래스형 컴포넌트(Class component)의 단점들을 개선했다. React Hooks에서는 함수형 컴포넌트(Functional Component)를 사용한다. 기존에 사용하던 Class를 이용한 코드 작성 대신, Function에서 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리 기존 Class Component의 단점 계층이 너무 많아진다. Component가 너무 복잡해진다. Class를 Component로 쓰면, bind, this를 사용하는데, 이는 컴퓨터의 많은 자원을 사용하며, 사람에게는 혼란을 야기한다. Hooks의 등장 Class 선언해서 사용하던 Componen..

DOM 이란? Document Object Model (문서객체모델)의 약자이다. 문서 객체는 Web Browser에서 HTML 문서에 JavaScript가 접근할 수 있도록 를 객체로 만든 것 이다. 프로그래밍 언어가 DOM 에게 접근하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할을 한다. 기존의 렌더링 방식 DOM tree 생성 → Render엔진이 HTML문서를 파싱하고 어떤 내용을 페이지에 렌더링 할지 결정한다 CSSOM tree 생성 → Render엔진이 CSS 파일을 파싱해서 어떤 내용을 페이지에 렌더링 할지 결정한다. DOM 트리 + CSSOM 트리 를 결합해서 Render tree생성 Layout 생성 → 렌더트리로 각 노드의 위치와 크기를 계산한 Layout을 생성 Pai..