공부노트/React 5

[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

React hooks 리액트 훅 useState란?

1. React hooks이란? 아주 쉽게 React는 클래스형, Hooks는 함수형이라고 생각하시면 됩니다. 리액트와 리액트 훅은 다른 라이브러리가 아닙니다. 같은 라이브러리이며 단지 클래스형으로 코드를 작성하느냐, 함수형으로 작성하느냐의 차이입니다. 그렇다면 왜 함수형을 사용하는 게 더 좋고, 모던하며, 효과적인지 알아보겠습니다. 클래스형? 함수형? - 클래스형 처음 리액트는 클래스형으로 등장하였습니다. 하지만 로직이 비교적 복잡하여 컴포넌트 재사용에 용이하지 않았고, 코드가 불필요하게 길어지기도 했습니다. 그러하여 Facebook은 조금 더 실용적이고 코드도 줄일 수 있는 함수형의 리액트 훅을 발표하였습니다. - 함수형 함수형의 리액트 훅은 컴포넌트를 재사용하기 정말 쉽습니다. 또한 제공되는 함수들..

공부노트/React 2022.02.14

[ React ] 리액트 설치 및 기본 세팅

1. nodejs 설치 node.js 설치 링크입니다. https://heytech.tistory.com/199?category=521346 Node.js 설치 방법 공유!(+설치 에러 해결 방법) 💡학습목표 Node.js 설치하는 방법과 환경 변수 설정하는 방법에 대해 학습한다. Node.js 설치여부 확인 cmd 창에 아래 명령어를 입력해 봅니다. (cmd 창 키는 방법: 키보드 내 윈도우 버튼 + cmd 입력) n heytech.tistory.com 2. IDE 설치(VS Code) VS Code 설치 링크입니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code..

공부노트/React 2022.02.13