React

웹 애플리케이션의 발전과 프레임워크, 라이브러리에 대한 정의, 리액트를 사용하는 이유를 알아보자!

React의 정의 리액트 → 페이스북에서 개발, 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리. 리액트의 UI 자동 업데이트로 인해 데이터 기반의 선언적 개발이 가능해지고, 자동으로 UI를 업데이트하는 과정에서 가상 돔(Virtual DO

Node.js 자바스크립트 → 웹 브라우저에 동작하기 위해 탄생하였다. 자바스크립트의 실행환경인 각 브라우저마다 자바스크립트를 해석하고 실행할 수 있는 엔진이 있는데 대표적으로 구글 크롬의 v8엔진이 있다. 웹 개발시장이 성장함에 따라 웹 브라우저 이외의 환경에서도

CRA란? CRA(Create React App)→ 리액트 프로젝트를 시작할 때 필요한 개발환경을 세팅해주는 도구. 리액트를 이용해 웹 애플리케이션을 개발하기 위해서 필요한 도구들을 모아놓은 툴체인 > 툴체인 → 여러가지 도구(Tool) 등을 연결해둔것. > >

props → properties의 줄임말. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. 비구조화 할당(=구조분해) 비구조화 할당 문법 → 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해주는 것. 함수의 파라미

조건부 렌더링 → 특정 조건에 따라 다른 결과물을 렌더링 하는 것. 조건부 렌더링을 할 때, 가장 기본적인 방법은 삼항연산자를 사용하는 것이다. 삼항연산자를 사용한 조건부 렌더링은 주로 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용한다. 내

첫번째 인자 = 상태의 기본 값.두번째 인자 = Setter 함수(파라미터로 전달받은 값을 최신 상태로 설정해준다)

자바스크립트를 사용할 땐, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector과 같은 DOM Selector 함수를 사용해서 DOM을 선택한다. > 리액트를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야 하는 상황이 발생할

이 배열을 컴포넌트로 만들어 렌더링 하려면 어떻게 해야할까? 1번째 방법 - 코드를 그대로 작성한다 → 가장 비효율적임. 두번째 방법 - 컴포넌트를 재사용 할 수 있도록 새로 만들어준다. → 배열이 고정적이라면 상관없지만, 배열의 인덱스를 하나하나 조회해가면서

useRef → 컴포넌트에서 특정 DOM 을 선택해야 할 때, 사용한다. 함수형 컴포넌트에서 ref를 사용할땐 useRef라는 Hook함수를 사용한다. useRef Hook은 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할때도 사용한다. useRef로 관