React

[React] Redux를 사용해서 간편하게 모달(modal) 구현하기

개요 modal은 사용자의 이목을 집중시키기 위한 인터페이스 창이다. 문서 내의 상위에 배치되며 사용자의 이목을 집중시키기에 좋다. 모달의 on, off는 보통 bool타입의 state로 관리하는데, 전역 상태 관리에 사용하는 라이브러리인 redux를 사용해서 모달을 구현하면 코드도 줄고, 관리가 용이할 것 같다는 생각이 들어 구현하게 되었다. 사용 라이브러리 본 글은 Redux와 bootstrap modal을 사용한다. 설치 명령어는 다음과 같다. npm i @reduxjs/toolkit bootstrap react-redux 구현 먼저 Redux가 관리할 state의 초기값을 선언한다. redux.ts const initialState = { message : "", isOpen : false, } ..

[React] 컴포넌트의 생명주기(Lifecycle)

생명주기란? 컴포넌트의 생성부터 소멸까지의 과정을 컴포넌트의 생명주기(Lifecycle)라고 한다. 컴포넌트는 생명주기마다 함수를 가지고 있고, 이 함수들을 이용하면 주기의 특정 시점에 원하는 동작을 하도록 만들 수 있다. 컴포넌트의 생명주기 컴포넌트의 생명주기 함수는 총 8종이 있다. 생명주기 함수는 리액트에서 자동으로 호출하며 개발자가 마음대로 호출할 수 없다. 생명주기를 그림으로 나타내면 다음과 같다. 컴포넌트는 생성부터 소멸까지 컴포넌트 생성 → 생성 완료 → 갱신 완료 → 소멸 완료의 4가지 단계를 거친다. 과정은 컴포넌트 생성 → 생성 완료(생성 과정), 생성 완료 → 갱신 완료(갱신 과정), 갱신 완료 → 소멸 완료(소멸 과정)의 3가지 과정을 거친다. 먼저 생명주기 함수가 무엇이 있는지 알..

[React] 프로퍼티에 필수, 기본값 지정 / 자식 프로퍼티 사용

필수 프로퍼티 특정 컴포넌트에 반드시 전달되어야 하는 프로퍼티가 있다면, 프로퍼티를 필수 프로퍼티로 지정하여 보낼 수 있다. 필수 프로퍼티는 특수 변수 isRequired를 사용하여 전달할 수 있다. 필수 프로퍼티 사용하기 먼저 App.js에서 object형 프로퍼티와 정수형 프로퍼티 2개를 넘겨 줄 것이다. App.js import Ex from './03/Ex'; import './App.css'; function App() { return ( ); } export default App; 여기서 우리는 requiredNumValue를 기본값으로 지정할 것이다. props는 기본적으로 문자형으로 전달된다. 때문에 prop-types를 사용하여 프로퍼티 자료형을 지정해줘야 한다는 것을 잊어선 안된다. i..

[React] 다양한 자료형 프로퍼티 사용하기

시작 리액트에서 프로퍼티에 int형이나 boolean형의 값을 전달할 때는 큰따옴표를 사용할 수 없다. 그냥 큰따옴표에 값을 전달하면 문자형으로 인식이 되어 버린다. 때문에 자료형을 지정하여 프로퍼티를 전달할 수 있는 방법을 소개한다. import PropTypes from 'prop-types'; 먼저 해당 라이브러리를 import 해야한다. 해당 글에서는 ChildComponent라는 임의의 컴포넌트를 만들어 사용했다. 객체 구조 분해 할당식 사용 import React, { Component } from 'react'; import PropTypes from 'prop-types'; class ChildComponent extends Component { render() { const { numVa..

[React] 프로퍼티(props) 기본

개요 프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. JS의 DOM트리 방식으로도 값을 전달할 수 있다. 프로퍼티값은 수정할 수 없다. 코드를 보면서 사용 방법을 알아보도록 하겠다. 예제 코드 우선 임의의 컴포넌트 하나를 생성한다. 본 글에서는 MyComponent라는 임의의 컴포넌트를 생성했다. 아래 코드는 클래스형 컴포넌트의 예시이다. 클래스형 컴포넌트와 함수형 컴포넌트를 모두 한 번씩 생성해 보면서 프로퍼티를 전달받을 것이다. import React, { Component } from 'react'; class MyComponent extends Component { render() { return ( ); } } export default MyComponent; 이렇게 컴포넌..

[React] 리액트 시작하기

준비 먼저 컴퓨터에 Node.js를 설치해야 한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당 페이지에서 다운로드를 받을 수 있다. 위 링크로 들어가면 위와 같은 화면이 나올텐데 이 글을 작성한 날짜 기준으로 안정적, 신뢰도 높은 버전이 18.12.1이므로 18.12.1을 설치하는 것을 권장한다. 만약 프로젝트마다 여러 버전의 Node.js를 사용해야 한다면 NVM(Node Version Manager)를 설치하면 된다. https://github.com/coreybutler/nvm-windows/releases Releases · cor..