거니의 velog

* Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 준다. * 이번 실습은 다음과 같은 흐름으로 진행된다. * 실습을 진행하기 위해 create-react-app을 사용하여 새로운 프로젝트를 생성해 주자. $ yarn create react-app hooks-tutorial 1. useState * useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 이전에도 이미 사용해 보았는데, 이번 장에서 다시 복습해 보자. 만약 함수형 컴포넌트에서 상태를..

3. 라이프사이클 메서드 사용하기 * 이전에 살펴본 라이프사이클 메서드를 직접 사용해 본다. 이번 실습은 다음 흐름으로 진행된다. (1) 예제 컴포넌트 생성 src 디렉터리에 LifeCycleSample.js라는 컴포넌트를 만들자. import React, { Component } from 'react'; class LifeCycleSample extends Component { state = { number: 0, color: null, }; myRef = null; // ref를 설정할 부분 constructor(props) { super(props); console.log('constructor'); } static getDerivedStateFromProps(nextProps, prevState)..

* 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. * 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. * 이때는 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. 함수형 컴포넌트에서는 사용할 수 없는데, 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. Hooks에 대한 내용은 다음에 알아보도록 하자. 1. 라이프사이클 메서드의 이해 * 라이프사이클 메서..

4. 응용 * 지금까지 배운 개념을 응용하여 고정된 배열을 리렌더링하는 것이 아닌, 동적인 배열을 렌더링하는 것을 구현해 보자. 그리고 index 값을 key로 사용하면 리렌더링이 비효율적이라고 배웠는데, 이러한 상황에서 어떻게 고윳값을 만들 수 있는지도 알아보자. 이 절의 실습 흐름은 다음과 같다. (1) 초기 상태 설정하기 * IterationSample 컴포넌트에서 useState를 사용하여 상태를 설정해 보자. 세 가지 상태를 사용할 텐데 하나는 데이터 배열이고, 다른 하나는 텍스트를 입력할 수 있는 input의 상태이다. 그럼 마지막 하나는 무엇일까? 그것은 데이터 배열에서 새로운 항목을 추가할 때 사용할 고유 id를 위한 상태이다. * 배열을 설정할 때, 조금 전에는 단순히 문자열로 이루어진 ..

* 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있다. src 디렉터리에 IterationSample.js라는 파일을 작성해 다음 코드를 따라 한번 적어보자. import React from 'react'; const IterationSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; * 코드에서 다음 형태가 반복되는 것을 볼 수 있다. ... * 지금은 li 태그 하나 뿐이라 그렇게 문제가 되지는 않을 것 같다. 하지만 코드가 좀 더 복잡하다면 어떨까? 코드양은 더더욱 늘어날 것이며, 파일 용량도 쓸데없이 증가할 것이다. 이는 낭비다. 또 보여 주어야 할 데이터가 유동적이라면 이런 코드로는 절..

2. ref 사용 * 이제 프로젝트에서 ref를 사용해 보자. ref를 사용하는 방법은 두 가지이다. (1) 콜백 함수를 통한 ref 설정 * ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것이다. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면 된다. 이 콜백 함수는 ref 값을 파라미터로 전달받는다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 준다. * 콜백 함수 사용 예시 {this.input=ref}} /> * 이렇게 하면 앞으로 this.input은 input 요소의 DOM을 가리킨다. ref의 이름은 원하는 것으로 자유롭게 지정할 수 있다. DOM 타입과 관계없이 this.superman = ref 처럼 마음대로 지정한..

* 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다.* DOM 요소의 id * 특정 DOM 요소에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 우리가 다루는 리액트 프로젝트에서 사용하는 public/index.html 파일에도 id가 root인 div 요소가 있다. * 그리고 src/index.js 파일 중에는 id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있다.const root = ReactDOM.createRoot(document.getElementById('root'));* 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 ..

2. 예제로 이벤트 핸들링 익히기 * 그럼 예제로 이벤트 핸들링을 익혀 보자. 앞으로 실습할 각 단계는 다음과 같다. (1) 컴포넌트 생성 및 불러오기 [1] 컴포넌트 생성 * 실습을 시작하기에 앞서 새 컴포넌트를 만들어 보자. src 디렉터리 내부에 EventPractice.js 파일을 만들자. 그리고 컴포넌트 초기 코드(rcc)를 작성하자. import React, { Component } from 'react'; class EventPractice extends Component { render() { return ( 이벤트 연습 ); } } export default EventPractice; [2] App.js에서 EventPractice 렌더링 * App 컴포넌트에서 EventPractice ..

* 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. HTML을 사용한 적이 있다면 매우 익숙할 것이다. HTML에서 DOM 요소에 이벤트를 설정하는 방법을 한번 살펴보자.* 다음 코드를 HTML 파일로 저장하여(프로젝트 디렉터리 외부에 저장하자) 웹 브라우저로 열어보거나, JSBin에서 코드를 입력하여 테스트해 보자. 여기서는 JSBin을 사용해 보자.https://jsbin.com/?html,output JS BinSample of the bin:jsbin.com..

4. state * 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 한다. 예를 들어 현재 상황에서는 App 컴포넌트에서 MyComponent를 사용할 때 props를 바꾸어 주어야 값이 변경될 수 있는 것이다. 반면 MyComponent에서는 전달받은 name 값을 직접 바꿀 수 없다. * 리액트에서는 두 가지 종류의 state가 있다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state이다. (1)..