1. DOM? Document Object Model의 약자이며, XML이나, HTML 문서에 접근하기 위한 인터페이스라고 보면 된다. 위와 같은 계층 구조로 나타나 있으며, 자바스크립트를 사용해서 문서의 요소를 변경, 수정, 삭제할 수 있다. 2. Element html 태그를 사용하지 않고, 자바스크립트로 직접 만들 수 있다. 이것을 React에서 어떤 방식으로 사용할까? 3. React에서의 Element 다루기 보는 바와 같이 React에서도 Element를 생성, 수정을 할 수 있다.

0. 시작하면서 컴퓨터를 포맷하고 기존에 사용하던 프로그램들을 새롭게 설치하는 작업을 하면서, 이번에 React 개발환경을 구성하는 디테일한 방법을 정리하고자 한다! 설치하는 파일은 VS Code, Node.js, yarn, Git 을 설치할 것이다. Mac과 Window가 조금씩은 다를 수 있는데, 이번엔 Window 컴퓨터를 포맷했으니 Window용 세팅이다! 다음에 사용하는 Mac을 포맷할 경우가 있다면, 그때 또 Mac용을 작성하겠다! 1. VS Code 설치 구글에 VS Code를 검색하면 위와 같이 나올것이며, Download를 클릭하자! 우린 Window 컴퓨터를 사용하니깐 Window 용을 다운받자! 설치가 완료되고 실행하면 위와같은 화면이 나온다. 당연히 동의하고 다음을 쭉 누른다! 위 ..

웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예를 들어 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 ajax 기법을 사용하여 서버의 API를 호출하여 데이터를 수신한다. 이 경우 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리한다. 이 과정에서 해당 작업을 비동기적으로 처리하게 된다. 만약 작업을 동기적으로 처리한다면 요청이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없다. 그리고 요청이 끝나야 비로소 다음 예정된 작업을 할 수 있다. 하지만 비동기적으로 처리하면 웹 애플리케이션이 멈추지 않기 때문에 동시에 여러 가지 요청을 처리할 수도 있고, 기다리는 ..

useEffect랑 useLayoutEffect 둘 중 useLayoutEffect 먼저 화면에 랜더링 된다. useLayoutEffect?? useEffect와 비슷한 역할을 한다. useEffect는 보통 화면이 랜더링 된 후 실행이 되지만, useLayoutEffect는 화면의 리사이징, 즉 레이아웃의 변환을 감지하는 Effect이다. 정리하자면 useEffect -> 화면이 완전히 바뀌고 난 후 발생 useLayoutEffect -> 화면이 바뀌기 전 발생

Javascript를 사용할 때, 특정 DOM을 선택해야 하는 상황에서 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택해야 한다. 리액트를 사용하는 프로젝트에서도 마찬가지로 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나, 설정하든지, 또는 포커스를 설정해줘야 한다던지 등, 생각보다 다양한 상황이 있다. 그리고 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용할 때도 특정 DOM에다가 적용해야 한다. 이럴 때, 리액트에서는 ref라는 것을 사용한다. ..

useEffect??? componentDidMount와 componentDidUpdate, componentWillUnmount 클래스 컴포넌트에서 제공하는 Lifecycle API를 useEffect를 사용하여 대신할 수 있다!! render가 발생할 때마다 (componentDidMount ⇒ 초기, componentDidUpdate ⇒ 매번) effect가 실행된다. 여기서 두 번째 파라미터인 inputs를 통해 특정 상태가 update 되었을 때만 effect가 실행되게 설정할 수 있다. 만약 useEffect의 inputs에 빈 배열을 넘겨주면 최초(componentsDidMount)에만 실행된다. componentWillUnmount를 실행하기 위해선 return을 사용하여 기능 수행이 가능..

특정 DOM 요소에 작업을 해야 할 경우 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 이렇게 HTML에서 id를 사용하여 특정 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법도 있다. 이것이 바로 ref(reference의 줄임말)이다. 물론 리액트 컴포넌트 안에서 id를 사용할 수 있다. JSX안에 id를 달면 되기 때문이다. 하지만 여러 컴포넌트를 사용할 때 id를 사용하게 되면 HTML의 id는 유일(unique) 해야 하는데, 중복된 id를 사용하는 컴포넌트가 여러 개 생길 우려가 있다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이러한 문제에 걱정이..

useState?? useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이벤트 핸들러나 다른 곳에서 호출할 수 있다. 아니!! 근데 이런 걸 왜 쓰는 겨?? state는 리액트에서 동적인 부분을 담당한다!! 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션(상호작용)에 따라 바뀌어야 하는데 우리가 일반적으로 사용하는 let, const 변수는 정적인 변수여서 화면에 리렌더링이 되지 않는다. 그런 상황에서 state없이 개발을 진행한다면.... 어라? 전부... 정적?? 에라이 ! 와장창!!! 할 수 있기 때문에 동적으로 값이 바뀌는 state를 사용한다. import React, { useState } from 'react'; function Example() { //..