Jun's TID

지금까지 학습한 리액트 기초 개념을 가지고 직전에 Todo List App을 만들어 보았다. 일반적인 상황에서 할 일은 10개를 넘어가지 않으니, 이 App을 사용할 때 큰 불편함 없이 사용할 수 있다. 만약, 데이터가 1000개 이상으로 많아진다면 어떨까? 이벤트를 핸들링할 때마다 1000개 이상의 컴포넌트를 모두 리렌더링하는 것은 분명히 부담이 될 것이며, 속도 또한 체감이 가능할 정도로 느려질 것이다. Todo를 2500개 정도 만들어서 한번 부하를 줘보자. ◎App.js import './App.css'; import TodoTemplate from "./components/TodoTemplate"; import TodoInsert from "./components/TodoInsert"; impo..

이제까지 리액트의 상태나 컴포넌트 등 기초적인 부분을 다뤄봤으니, 국민 첫 프로젝트인 Todo List를 한번 만들어보려고 한다. SPA(single page application)으로 만들기 때문에 그렇게 많은 컴포넌트나 코드는 없이, 정말 간단한 CRUD 기능을 가지고 있는 Todo List 이다. 바로 한번 시작해보자. 우선, 총 App 컴포넌트를 제외하고 총 4개의 컴포넌트를 만들어 사용할 것인데, 각 컴포넌트를 용도별로 확인해보자. 1. TodoTemplate: 화면을 가운데에 정렬시켜 주며, 앱 타이틀을 보여준다. 2. TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트이다. state를 통해 인풋의 상태를 관리한다. 3. TodoListItem: 각 To do 항목에 대한 ..

리액트에서 컴포넌트를 스타일링할 때 다양한 방식을 사용할 수 있다. 여러 방식 중에서 딱히 정해진 방식이란 없지만, 보통 개발할 프로젝트의 특징이나 개발자의 취향으로 갈린다. 이번에 다뤄볼 리액트 스타일링 방식은 다음과 같다. 1. 일반 css: 컴포넌트를 스타일링하는 가장 기본적인 방식 2. Sass: 자주 사용되는 css 전처리기 중 하나로 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있도록 해준다. 3. css Module: 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션이다. 4. styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당..

Hooks는 리액트 v16.8에서 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 이전 포스팅에서 잠깐씩 그 개념을 다룬 적이 있는데, 이번에는 좀 더 본격적으로 Hooks를 다뤄보자. useState useState는 가장 기본적인 Hook이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. 함수 컴포넌트에서 상태를 관리해야 한다면, 이 Hook을 사용하면 된다. 간단한 예제를 하나 만들어보자. ◎Counter.js import {useState} from "react"; const Counter = () => {..

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 수명의 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 이럴 때 컴포넌트의 라이프사이클 메서드를 사용한다. 마찬가지로 라이프사이클 메서드는 클래스형 컴포넌트에만 있는 기능이지만, Hooks 기능을 사용하여 비슷한 작업을 처리할 수는 있다. 바로 한번 알아보자. 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 아홉 가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 ..

웹 App을 만들다보면 태그와 같이 반복되는 코드를 작성할 때가 있다. 이번 포스팅에서는 리액트 프로젝트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법을 다뤄보자. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) - callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다. 1. currentValue: 현재 처리하고 있는 요소 2. index: 현재 처리하고 있는 요소의 index 값 3. array..

일반 HTML에서 DOM 요소에 이름을 달 떄는 보통 id를 사용한다. 특정 DOM 요소에 id를 달아서 CSS 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수가 있다. 기본 리액트 프로젝트도 처음 생성을 하면 div 요소에 root라는 아이디를 달아서 const root = ReactDOM.createRoot(document.getElementById('root')); 와 같이 사용한다. HTML 에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 바로 ref(reference)이다. 리액트 컴포넌트 안에서도 id를 사용활 수 있지만, JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링할 때 그대로 전달된다...

리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤나 비슷하다. 리액트에서 이벤트를 사용할 때 주의할 사항들이 몇 가지가 존재하는데, 이는 다음과 같다. 1. 이벤트 이름은 Camel Case: 예를 들어 HTML의 onclick은 onClick으로 작성해야 한다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 3. DOM 요소에만 이벤트를 설정할 수 있다. 직접 만든 컴포넌트에는 자체적으로 이벤트를 설정할 수 없다. 바로 한번 예제와 함께 알아보도록 하자. 우선, 예제로 사용할 컴포넌트를 생성하여 불러오자. ◎EventPractice.js import {Component} from 'react'; class E..

리액트에서 컴포넌트를 선언하는 방식은 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 첫 리액트 프로젝트에 있던 App.js 에는 function App()으로 시작하는 함수형 컴포넌트가 있었는데, 이를 클래스형 컴포넌트로 변경할 수도 있고, 새로운 컴포넌트를 추가할 수도 있다. 바로 한번 리액트의 컴포넌트 개념에 대하여 알아보자. 함수형, 클래스형 컴포넌트 ◎App.js import logo from './logo.svg'; import './App.css'; function App() { const name = 'React'; return ( {name} ); } export default App; 위와 같이 함수형 컴포넌트로 선언되어 있는 App() 컴포넌트를 클래스형으로 바꿔보면, import..

리액트에서 사용하는 자바스크립트 확장 문법인 JSX를 올바르게 사용하기 위해 준수해야 할 몇 가지 규칙과 문법을 알아보자. 1. 감싸인 요소 컴포턴트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 아래와 같이 작성할 수 없다는 이야기이다. import logo from './logo.svg'; import './App.css'; function App() { return ( 리액트 안녕 잘 작동하니? ); } export default App; 위 코드는 2개 이상의 컴포넌트를 감싸는 부모 요소가 없기 때문에 오류가 난다. 아래와 같이 div 태그로 감싸거나, import logo from './logo.svg'; import './App.css'; function App() { retur..