React

React를 들어가기 전 ES6에서 자주 사용되는 문법을 알아보자.전에는 상수든 변수든 var 를 이용했으나 이제는 const(상수)와 let(변수) 이용한다.const : 재할당 불가. -- 상수let : 재할당 가능. --변수const와 let은 둘 다 block

컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘

JavaScript + XMLJavascript를 확장한 문법Javascript의 모든 기능이 포함되어 있으며, React Element(화면에 그려지는 HTML적 요소)를 생성하기 위한 문법.리액트에서는 딱 하나의 html파일만 존재한다. --public폴더 > in

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터.컴포넌트 간의 정보 교류 방법이다.props는 반드시 위에서 아래 방향으로만 흐른다.부모 -> 자식 방향 (단방향)props는 반드시 읽기 전용으로 취급하며 변경하지 않는다.전달하기 주체 : 부모받기 주체 : 자식prop

컴포넌트 내부에서 바뀔 수 있는 값.바뀌어야 하는 이유? UI로의 반영을 위해!즉, state는 UI를 바꾸기 위해 사용한다.useState()를 사용한다.useState는 state를 만들어주는 리액트에서 제공하는 기능(훅).state는 언제든지 변할 수 있는 값이기

불변성 : 메모리에 있는 값을 변경할 수 없는 것.자바스크립트의 데이터 형태 중 원시 데이터는 불변성 🙆🏻‍♀️원시 데이터가 아닌 객체, 배열, 함수는 불변성 ❌만약 let A = 1 이라고 선언하면 메모리에는 1이라는 값이 저장된다.그리고 변수 A는 메모리에 있는

리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미.UI : 음식컴포넌트 : 음식 만드는 주방장리액트 : 웨이터렌더링 일으키기(triggering) - UI를 주문하고 주방으로 전달하는

함수 컴포넌트에서 가변적인 상태를 가지게 해준다.useState가 배열을 반환하고, 이를 구조 분해 문법으로 꺼내놓은 모습이다.setState를 이용해 state 값을 수정할 수 있다.그리고 이때, state가 객체 데이터 타입인 경우 불변성을 유지해줘야한다는 것 주의

useEffect는 ⭐리액트 컴포넌트가 렌더링될 때마다⭐ 특정 작업을 수행하도록 설정할 수 있는 hook.어떤 컴포넌트가 화면에 보여지거나 사라졌을 때 내가 무언가를 실행하고 싶다면? useEffect 사용.리액트에서 제공하는 훅이기 때문에 import React, {

⭐DOM 요소에 접근⭐할 수 있도록 하는 hook.리액트에서 DOM을 선택해야할 상황이 생길 수 있는데 예를 들면 화면이 렌더링 되자마자 특정 input태그가 focusing되야 하는 경우. 이럴 때 useRef를 사용한다.ref의 current에 설정한 값이 들어있다

깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트로부터 왔는지 파악이 어려워진다.어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어지니 대처가 늦다.\--> react context API 개념 등장.useContext hook으로 쉽게 전역 데이터를 관리할 수 있게