useMemo, useCallback 개념정도와 어디에 쓰이는지 간략하게만 작성하겠습니다. 1. useCallback 결국 memoization ! 리액트 공식홈페이지에서는 useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed 라고 설명하고 있습니다. 의존성 배열에 변화가 있다면 callback! ![](https://images.velog.io/images/vlrtpfdkxm/post/270c4a18-8120-416d-80ca-6841abd4088f/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-02-23%20%E1%84%8B%E1%85%A9%E1%84%8C%E1

실행 컨텍스트 > 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 어떤 실행 컨텍스트를 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행합니다. 실행 컨텍스트를 살펴보기 앞서 스택(stack)과 큐(queue)를 살펴보자 -스택 (stack) > 스택은 출입구가 하나뿐인 우물 같은 데이터 구조입니다. 비어있는 스택에 순서대로 a,b,c,d를 저장했다면, 꺼낼 때는 반대로 d,c,b,a 순서대로 꺼낼 수 밖에 없습니다. -큐 (queue) > 큐는 양쪽이 모두 열려있는 파이르를 떠올리면 됩니다. 종류에 따라 양쪽 모두 입력과 출력이 가능한 큐도 있으나 보통은 한쪽은 입력만, 다른 한쪽은 출력만을 담당하는 구조를 말합니다. a,b,c,d 로 데이터를 저장했다면 꺼낼 때도 역시 a,b,c,d 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를

깊은복사와 얕은복사의 차이는 기본형과 참조형 복사의 차이에 있다. 변수 복사 과정에 있어 '기본형도 주솟값을 참조한다' 가 맞지만 참조형과의 차이는 '객체의 변수(프로퍼티) 영역' 이 별도로 존재 한다 는 점입니다. 깊은복사 let num2=num1 에서 num2도 num1과 같은 데이터 '10'을 가지고 있는 주솟값을 바라보지만 num2=15라고 재할당 하는 순간 num2는 새로운 데이터 '15'의 주솟값을 바라보게 됩니다. 주솟값을 복사하는 과정이 한 번만 이뤄지며 독립적인 메모리에 값(ex '15) 자체를 할당하여 생성하는 것이라 볼 수 있다. 얕은복사 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값(메모리 주소)를 전달하여 결국 한 데이터를 공유합니다. ![](https://images.velog.io/images/vlrtpfdkxm/post/eadaf138-9604-4040-9ca5-84741ee5cfb4/KakaoTa

식별자와 변수 > 보통 '변수'와 '식별자'를 혼용하는데 변수는 변할수 있는 무언가 라고 해석하면 됩니다. 여기서 무언가란 데이터! 식별자는 어떤 데이터를 식별하는데 사용되는 이름 즉 변수명 입니다. 데이터 할당 기본적인 변수 선언식입니다. 풀어쓰면 변할수 있는 데이터를 만든다 이 데이터의 식별자는 a로 한다 결국 변수란 결국 변경 가능한 데이터가 담길 수 있는 공간 또는 그릇

protocol 사용자가 서버에 접속할때 어떤 방식으로 통신할것인가에 대한 부분 웹브라우저와 웹서버가 데이터를 주고받기 위해서 만든 통신 규칙 domain port 컴퓨터 한대에 여러대의 서버가 있을 수 있다. 클라이언트가 어떤 서버와 통신할지 구분 (80번 포트가 기본) path 컴퓨터 안에 있는 어떤 디렉토리안에 어떤 파일인지 가르킨다. query string 웹서버에게 내

옵셔널 체이닝 > 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 필요한 이유? 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해봅시다. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다. 명세서에 ?.이 추가되기 전엔 이런 문제들을 해결하기 위해 && 연산자를 사용하곤 했습니다. 옵셔널 체이닝의 등장 ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다. 설명이 장황해지지 않도록 지금부턴 평가후 결과가 null이나 undefined가 아닌 경우엔 값이 ‘있다’ 혹은 '존재한다’라고 표현하겠습니다. 위의 error를 옵셔널 체이닝을 사용하면

- 메서드 (method) > 자바스크립트에선 객체 프로퍼티 안에 함수를 할당에 객체에게 행동 할 수 있는 능력을 부여합니다. user객체 안에 함수를 할당해 호출해주면 user가 인사해줍니다. 이렇게 객체 프로퍼티에 할당된 함수를 ⭐️메서드(method) 라고 부릅니다. - this > 메서드 내부에서 this 키워드를 사용하면 객체에 접근 할 수 있습니다. 메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있습니다. 모든 메서드가 그런 건 아니지만, 대부분의 메서드가 객체 프로퍼티의 값을 활용합니다. user.sayHi()가 실행되는 동안 this는 user를 나타냅니다. 🔴 외부 변수(this.name 이 아닌 user.name)를 사용해 객체에 참조하면 예상치 못한 에러가 발생할 수 있습니다. user를 복사해 다른 변수에 할당(admin = user)하고, user는 전혀 다른 값으로 덮어썼다고 가정해 봅시다. s

객체! 와 원시타입! 의 근본적인 차이 중 하나는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다. 원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사 독립된 변수에 각각 문자열 "Hello" 가 저장됩니다. ⭐️ 객체의 동작방식은 다릅니다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장됩니다. ![](https://images.velo

-Object 자료형에서 하나의 데이터만 담을수 있는 '원시형'과 달리 객체는 다양한 데이터를 담을 수 있습니다. key로 구분된 데이터 집합이나 복잡한 개체(entity)를 저장할 수 있습니다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용됩니다. 프로퍼티 키는 ‘프로퍼티 이름’ 이라고도 부릅니다. ⭐️ 객체를 서랍장에 비유하면 이해하기 쉽다 서랍장 안의 파일은 프로퍼티 각가의 파일에 붙어있는 이름표는 프로퍼티의 key - 빈 객체를 생성하는 두가지 방법 {...} 중괄호를 사용하여 객체를 선언하는 것을 객체 리터럴(object literal) 이라 합니다. 주로 이 방법으로 객체를 생성! user라는 객체(서랍장) 에 두개의 프로퍼티가 (파일) 들어있습니다. name,age - 프로퍼티 ke

마운트/ 언마운트 > 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다. 컴포넌트가 마운트 (mount) 되고 언마운트 (unmount) 될 때 특정 코드를 실행하기 위해 컴포넌트 클래스에 특별한 메서드 (ex. componentDidMount( ) ) 를 선언할 수 있습니다. Recap ! When is passed to R

Clock.js 이전에 작성했던 Clock 컴포넌트입니다. Clock 이 타이머를 설정하고 매 초 UI를 업데이트 하는 것은 Clock 의 구현 세부사항이어야 합니다. 이상적으로 Clock 은 한번만 작성하고 자체적으로 업데이트 시키려고 합니다. 이를 실행하기 위해 state를 추가해주어야 합니다. 함수형을 class로 변환 Create an ES6 class, with the same name, that extends React.Component. Add a single empty method to it called render(). Move the body of the function into the render() method. Replace props with this.props in the render() body. Delete the remaining empty function declaration.

Component > components는 UI를 독립적이고 재사용 가능한 부분으로 분리합니다. 개념상 컴포넌트는 자바스크립트 함수와 비슷합니다. 임의의 입력 (props라고 부르는)을 받아들이고 어떤 게 화면에 나타나야 하는 지를 설명하는 React 요소를 반환합니다 Function This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. 말그대로 자바스크립트 함수이기 때문에 함수형 컴포넌트라 부릅니다. Class Rendering a Component 이전에는 DOM 태그를 나타내는 React element 만 있었습니다. However, elements can also represent user-defi

An element describes what you want to see on the screen 브라우저 DOM 요소와 달리 React 요소는 순수한 객체입니다. React DOM은 React 요소와 일치하도록 DOM을 업데이트합니다. -root React로 구축한 어플리케이션은 보톤 단일 루트 DOM 노드를 가집니다. React를 기존 앱에 통합하는 경우 원하는 만큼 많은 분리된 루트 DOM 노드가 있을 수도 있습니다. React 요소를 루트 DOM 노드에 렌더링하고 싶다면, ReactDOM.render() 에 둘 다 전달하면 됩니다. -Updating the Rendered Element React 요소는 변경 불가능 합니다. 한번 요소를 만들었다면, 그 자식이나 속성을 변경할 수 없습니다. 요소는 영화의 단일 프레임과 같습니다. 특정한 시간대의 UI를 보여줄 뿐입니다. 이 지식을 바탕으로 하면, UI를 업데이트할 수 있는 유일한 방법은 새

index.html scirpt로 불러온 JS파일에 필요한 태그들을 작성한 html입니다. clock.js ![](https://images.velog.io/images/vlrtpfdkxm/post/b0df8cd6-7742-44ae-b86c-4b049e30409b/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86

노마드코더 영상을 토대로 작성하였습니다. index.html head 안에 link로 style.css 파일과 body 안에 script로 app.js 를 불러오고 있습니다. app.js 를 살펴보면 App.js 정적이던 웹 페이지를 script app.js 를 통해 각 요소에 어떻게 접근하고 동적으로 바꿀 수 있는지 살펴 보겠습니다. 우선 console.log (document) / console.dir(document) 를 살펴보면 ![](https://images.velog.io/images/vlrtpfdkxm/post/af8f4403-9516-4fa1-ba19-517228ccc261/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202021-07-14%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.1

함수 > 함수는 프로그램을 구성하는 주요 '구성 요소(building block)' 입니다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러번 호출할 수 있습니다. 지역변수 함수 내에서 선언한 변수인 지역 변수 (local variable)는 함수 안에서만 접근할 수 있습니다. 외부변수 함수 내부에서 함수 외부의 변수인 외부 변수(outer variable)에 접근할 수 있습니다. 매개변수 > 매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있습니다. 기본값 > 매개변수에 값을 전달하지 않으면 그 값은 undefined가 됩니다. text값을 전달 받지 못해도 undefined 대신 기본값 "no text given"이 할당됩니다. 기본값 설정은 이러한 방법도 있습니다. 함수 선언문 and 함수 표현식 함수 선언문 > 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로

DOM(Document Object Model)이란? > 1. 웹페이지의 HTML을 계층화 시켜 트리구조로 만든 객체모델 JS는 이 모델로 웹페이지에 접근하고, 페이지 수정 가능 DOM은 웹페이지 (HTML)과 Script언어(Javascript) 를 서로 잇는 역할 그래서 JavaScript는 어떻게 HTML에 접근할 수 있다는 말일까요? 바로 document라는 전역객체를 통해 접근할 수 있습니다. J

-JSX란? > -JavaScript를 확장한 문법입니다. -자바스크립트의 모든 기능이 포함되어 있습니다. -JSX는 React “엘리먼트(element)” 를 생성합니다. -why JSX? React는 별도의 파일에 마크업과 로직을 넣어 기술 을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리 합니다. -JSX에 표현식 포함하기 결과물 ⬇️⬇️⬇️

리액트 주요 개념들을 정리하고자 리액트 공식문서를 참고하여 포스팅을 시작합니다. 처음으로 돌아가 다시 리액트 뿌수기! 공식문서에도 링크가 걸려 있지만 리액트 시작 튜토리얼은 https://www.taniarascia.com/getting-started-with-react/ Tania Rascia 이 분이 작성해놓은 글이 좋은 것 같다. what is React ? React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점이다. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다. Static HTML

Spread >말 그대로 펼친다 라는 의미로 객체나 배열을 펼칠 수 있습니다. 기존의 것을 건들이지 않고, 새로운 객체를 만든다는 것 인데요, 이러한 상황에 사용 할 수 있는 유용한 문법이 spread 입니다. rest > spread와 비슷하지만 역할은 다릅니다. 비구조화 할당 문법과 함께 사용됩니다.