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