React 3

[React/JS] 얉은 복사(Shallow Copy), 깊은 복사(Deep Copy) 그리고 React의 리렌더링

Javascript의 데이터 타입 얉은 복사와 깊은 복사에 대해 이해하기 위해서는 먼저 데이터 타입에 대한 이해가 필요하다. 복사는 어떤 데이터 타입인지에 따라 다르게 진행되기 때문이다. Javascript에서 사용되는 데이터들은 크게 원시타입과 객체타입으로 나뉜다. 원시 타입 원시 값 = 변경 불가능한 값 (immutable value) number, string, boolean, undefined, null, symbol 객체 타입 객체 = 변경 가능한 값 (mutable value) 객체, 함수, 배열 등 원시 값을 제외한 모든 것 변수에 값을 저장한다면? const a = 10; // a에는 10이 담긴다. 변수에 원시 값을 담는다면 값 자체가 담긴다. const a = { // a에는 주소가 담..

공부노트/React 2022.02.20

리액트를 다루는 기술 - JSX

해당 내용은 velopert님이 작성한 리액트를 다루는 기술 책을 요약하여 작성하였습니다. 리액트를 다루는 기술 - 김민준(velopert) 번들러 번들러란 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 주는것이다. 번들러 도구: 웹팩, Pracel, browserify 등 리액트 프로젝트에서는 웹팩을 사용하는 추세이다. 웹팩을 사용하면 SVG파일과 CSS파일도 불러와서 사용할 수 있다. 웹팩의 로더(loader)가 파일들을 불러오는 기능을 담당하고 있다. css-loader 는 CSS파일을, file-loader 는 웹 폰트나 미디어 파일 등을 불러올 수 있게 해준다. babel-loader는 자바스크립트파일을 불러올 때 최신 자바스크립트 문법으로 작성된 커드를 ES..

공부노트/React 2022.02.16

[React] Hooks - useState 사용

Hooks에서 처음으로 다뤄볼 기능은 useState였습니다. https://reload0213.tistory.com/94 React hooks 리액트 훅 useState란? 1. React hooks이란? 아주 쉽게 React는 클래스형, Hooks는 함수형이라고 생각하시면 됩니다. 리액트와 리액트 훅은 다른 라이브러리가 아닙니다. 같은 라이브러리이며 단지 클래스형으로 코드를 작 reload0213.tistory.com 이전에 살짝 어떤 녀석인지, 소개했고 이번엔 그 본격적인 사용 방법을 다루려고 합니다. 1. useState useState는 함수형 컴포넌트 내부에서 state 값을 관리(변경 등)을 하기 위해 사용하는 Hook입니다. 그러면 실제 사용을 통해 useState를 알아보겠습니다. 다음은..

공부노트/React 2022.02.14