쑥쑥자라기🌱

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

6.1 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. 6.1.1 문법 arr.map(callback,[thisArg]) 이 함수의 파마리터는 다음과 같다. callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지이다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 arra: 현재 처리하고 있는 원본 배열 thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스 6.1.2 예제 ma..

일반 HTML에서 DOM 요소레 이름을 달 때는 id를 사용한다. DOM 요소의 id 특정 DOM 요소에 어떤 작업을 해야 할 때 이렇게 요소에 id를 달면 CSS에서 특정 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업할 수 있다. 리액트 프로젝트에 사용하는 public/index.html 파일에도 id가 root인 div 요소가 있다. 그리고 src/index.js 파일 중에는 id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있다. 이렇게 HTML에서 id 를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 바로 ref(reference의 줄임말) 개념이다. 리액트 컴포넌..

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 한다. 4.1 리액트의 이벤트 시스템 리액트 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 4.1.1 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성한다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다. 3. DOM 요소에만 이벤트를 설정할 수 있다. DOM 요소에는 이벤트를 설정할 수 있지만 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 컴포넌트에 이벤트를 설정한다면 이벤트를 실행하는..

3.1 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지이다. 하나는 함수 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다. 클래스형 컴포넌트는 다음과 같이 이루어져 있다. import React, { Component } from "react"; class App extends Component { render() { const name = "react"; return {name}; } } export default App; 클래스형 컴포넌트로 바뀌었지만 역할을 함수 컴포넌트와 똑같다. 클래스형 컴포넌트와 함수 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다. ES6의 클래스 문법 ES6 이전에는 ..

2.1 코드 이해하기 파일 > 열기 > src/App.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; import 구문은 특정 파일을 불러오는 것을 의미한다. 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용하여 다른 파일들을 불러와 사용할 수 있다. 이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에는 없던 기능이다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능이다. 참고로 Node.js에서는 im..

1.1 왜 리액트인가? 자바스크립트만으로도 규모가 큰 애플리케이션을 만들수 있지만 대규모 애플리케이션 중 프론트엔드 사이드에서 돌아가는 애플리케이션 구조를 특별한 도구 없이 자바스크립트로만 관리하기위해 수많은 프레임워크가 이를 해결하기 위해 노력해왔다. 이 프레임워크들은 MVC, MVVM, MVW 아키텍처로 애플리케이션을 구조화한다. MVC, MVVM, MVW 등 여러 구조의 공통점은 모델과 뷰가 있다는 것이다. 모델: 애플리케이션에서 사용하는 데이터를 관리하는 영역 뷰: 유저에게 보이는 부분 프로그램이 유저에게서 어떤 작업(예: 버튼 클릭, 텍스트 입력 등)을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영한다. 반영하는 과정에서 보통 뷰를 변형하는데, 업데이트하는 항목에..