쌩로그

목록 포스팅 개요 본론 2-1. 라이프사이클 메서드의 이해 2-2. 라이프사이클 메서드 살펴보기 2-3. 라이프사이클 메서드 사용하기 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 07장 컴포넌트의 라이프사이클 메서드 를 학습하며 정리한 포스팅이다. 2. 본론 모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 이때는 컴포넌트의 라이프사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에..

목록 포스팅 개요 본론 2-1. 자바스크립트 배열의 map() 함수 2-2. 데이터 배열을 컴포넌트 배열로 변환하기 2-3. key 2-4. 응용 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 06장 컴포넌트 반복 을 학습하며 정리한 포스팅이다. 2. 본론 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있다. import React from "react"; const IteratorSampleOfSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IteratorSampleOfSample; 코드에서 다음 형태가 계속 반복되는 것을 볼 수 있다. ... 만약 코드가 좀 더 복잡하다면, 코드양이 늘어날 것이며, 파일 ..

목록 포스팅 개요 본론 2-1. ref는 어떤 상황에서 사용해야 할까? 2-2. ref 사용 2-3. 컴포넌트에 ref 달기 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 05장 ref: DOM에 이름 달기 을 학습하며 정리한 포스팅이다. 2. 본론 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. 특정 DOM 요소에 어떤 작업을 해야할 때 이렇게 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가지 요소를 찾아서 작업할 수 있다. src/index.js 파일 중에는 id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있다. const root = ReactDOM.createRoot(document.getElemen..

목록 포스팅 개요 본론 2-1. 리액트의 이벤트 시스템 2-2. 예제로 이벤트 핸들링 익히기 2-3.함수형 컴포넌트로 구현해보기 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 04장 이벤트 핸들링 을 학습하며 정리한 포스팅이다. 2. 본론 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예) 버튼에 마우스 커서를 올렸을 때는 onmouseover 마우스를 클릭했을 때는 onclick Form 요소의 값이 바뀔 때 onchange 2-1. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 사용법은 HTML에서 이벤트를 작성하는 것과 비슷한데, 주의해야 할 몇 가지 사항..

목록 포스팅 개요 본론 2-1. 클래스형 컴포넌트 2-2. 첫 컴포넌트 생성 2-3. props 2-4. state 2-5. state를 사용할 때 주의 사항 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 03장 컴포넌트 를 학습하며 정리한 포스팅이다. 2. 본론 컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 준다. 라이프 사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때 등 변화가 일어날 때 주어진 작업들을 처리할 수 있다. 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다. 2-1. 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지이다. 함수형 컴포넌트. 클래스형 컴포넌트 import '../ClassInstea..

목록 포스팅 개요 본론 2-1. 코드 이해하기 2-2. JSX란? 2-3. JSX의 장점 2-4. JSX 문법 2-5. ESLint와 Prettier 적용하기 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 02장 JSX 를 학습하며 정리한 포스팅이다. 2. 본론 2-1. 코드 이해하기 yarn $ yarn create react-app [프로젝트 이름] npm $ npx create react-app [프로젝트 이름 or $ npm init react-app [프로젝트 이름] 프로젝트 구동 프로젝트 디렉터리 이동 후, start // yarn$ yarn start // npm$ npm start import logo from './logo.svg'; import './..

목록 포스팅 개요 본론 2-1. 왜 리액트인가? 2-2. 리액트의 특징 2-3. 작업 환경 설정 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 01장 리액트 시작 을 학습하며 정리한 포스팅이다. 2. 본론 2-1. 왜 리액트인가? 리액트 최대한 성능을 아끼고 편안한 사용자 경험(user experience)을 제공하면서 구현하고자 개발한 것이 리액트(react)이다. 오직 View만 신경 쓰는 라이브러리이다. 렌더링 사용자 화면에 뷰를 보여주는 것 리액트를 사용하려면 리액트 컴포넌트가 최초로 실행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야한다. 컴포넌트는 데이터를 업데이트할 때 바로 DOM에 반영하지 않고, 이전에 ..