이 포스팅은 저자 김민준 님의 ‘리액트를 다루는 기술’을 참고하여 작성되었습니다. React 프로젝트에서 Redux를 이용한 상태관리 리액트에서 리덕스를 사용할 때 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컨포넌트를 분리하는 것이다. 프레젠테이셔널 컴포넌트 : 상태관리가 이루어지지 않고, 그저 props를 받아와서 화면에 UI를 보여주기만 하는 컴포넌트 컨테이너 컴포넌트 : 리덕스와 연동된 컴포넌트로, 리덕스로부터 상태를 받아오기도 하고 리덕스 스토어에 액션을 디스패치 하기도 한다. 카운터 컴포넌트 만들기 숫자를 더하고 뺄 수 있는 카운터 컴포넌트 생성 components/Counter.js import React from 'react'; const Counter = ({ number, o..

리덕스란? JavaScript(자바스크립트) 상태관리 라이브러리이다. Redux의 본질은 Node.js 모듈이다. 리덕스를 사용하는 이유? 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. 리덕스의 세 가지 규칙 1. Single source of truth(단일 스토어) 하나의 애플리케이션 안에는 하나의 스토어가 있다. 동일한 데이터는 항상 같은 곳에서 가지고 온다. 스토어라는 하나뿐인 데이터 공간이 있다는 의미 2. State is read-only(읽기 전용 상태) 상태를 업데이트 할때는 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다...

프로젝트에 라우터 적용 $ 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..

쿠키 쿠키 : 사용자의 HDD에 접근해서 가져오는 데이터 쿠키는 오로지 String형만 저장이 가능 session은 웹 브라우저 닫기 전 까지 유효하다 cookie는 사용자의 hdd에 저장한다. 쿠키 생성하기 쿠키 객체는 key값(String)과 value값(String)을 생성자로 가진다. 쿠키의 정보는 response객체의 addCookie 메서드를 이용해서 추가한다. 쿠키 정보 요청 getName메서드와 getValue 메서드를 이용해서 쿠키의 정보를 요청 할 수 있다. 쿠기 값 읽어오기 request객체의 getCookies() 메서드를 이용해서 쿠키의 값을 읽어 올 수 있다. //cookie로 저장될때 암호화 하기때문에 utf-8로 디코딩 해줘야 한글처리가 가능함.

내장 객체 영역 1. 내장 객체의 영역이란? 각 객체가 저장되는 메모리의 유효기간 → 웹 애플리케이션은 페이지 단위로 구성이 된다. 그래서 다른 페이지에서 선언한 변수에 접근하기 위해 접근할 수 있는 페이지 범위를 지정하는 것이 영역이다. 2. 내장 객체의 영역 종류 page 영역 : 하나의 jsp 페이지를 처리할 때 사용되는 영역 → 페이지를 벗어나면 소멸됨 request 영역 : 하나의 HTTP 요청을 처리할 때 사용되는 영역 → 호출된 페이지와 포워드(요청전달)된 페이지까지 공유됨 session 영역 : 하나의 웹 브라우저에 관련된 영역 → 클라이언트가 접속한 후, 웹 브라우저가 종료 될 때까지 공유됨 application 영역 : 하나의 웹 어플리케이션과 관련된 영역 → 서버가 꺼질 때 까지 공유..