[3장 컴포넌트] 첫 컴포넌트 생성

첫 번째 컴포넌트를 만들어 보자 

파일만들기 → 코드 작성 → 모듈 내보내기 및 불러오기 

 

src디렉터리에 MyComponent.js 파일 생성 

컴포넌트를 만들려면 컴포넌트 코드를 선언해야 한다 

컴포넌트 코드를 선언할 파일을 만들어 보자 

VS Code왼쪽 사이드바에 있는 파일 목록중 src 디렉터리를 마우스 오른쪽 버튼으로 누르고 새 파일(MyComponent.js)을 만들자 

 

코드작성

먼저 함수형 컴포넌트로 작성하고 나중에 클래스형 컴포넌트로도 작성해보자 

import React from "react";

const MyComponent = () => {
  return <div>나의 새롭고멋진 컴포넌트</div>;
};

export default MyComponent;

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98

화살표 함수

 

ES6의 화살표 함수 

화살표 함수는 ES6의 문법에서 함수를 표현하는 새로운 방식이다 

그렇다고 해서 기존 function을 이용한 함수 선언방식을 대체 하지 않는다

사용용도가 다르다 

이 문법은 주로 함수를 파라미터로 전달할때 유용하다 

setTimeout(function () {
  console.log("hello world");
}, 1000);

setTimeout(() => {
  console.log("hello world");
}, 1000);

 

이 문법이 기존 function을 대체 할수 없는것은 용도가 다르기 때문이다 

무엇보다 서로 가리키고 있는 this값이 다르다 

다음 코드를 확인해보자 

function BlackDog() {
  this.name = "흰둥이";
  return {
    name: "검동이",
    bark: function () {
      console.log(this.name + ": 멍멍!");
    },
  };
}

const blackDog = new BlackDog();
blackDog.bark();

function WhiteDog() {
  this.name = "흰둥이";
  return {
    name: "검둥이",
    bark: () => {
      console.log(this.name + ": 멍멍!");
    },
  };
}

const whiteDog = new WhiteDog();
whiteDog.bark();

PS D:\workspace\react\hello-react\src> node test
검동이: 멍멍!
흰둥이: 멍멍!
PS D:\workspace\react\hello-react\src> 

function() 을 사용했을때는 검둥이가 나오고 ()=>를 사용했을때는 흰둥이가 나온다 

일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다 

화살표 함수는 값을 연산하여 바로 반환 해야 할때 사용하면 가독성을 높일수 있다 

function twice(value) {
  return value * 2;
}

const triple = (value) => value * 3;

console.log(twice(2));
console.log(triple(2));

이렇게 따로 { } 를 열어 주지 않으면 연산한 값을 그대로 반환 한다는 의미이다 

 

함수형 컴포넌트를 선언할때 function 키워드를 사용하는 것과 화살표 함수 문법을 사용하는 것과 큰 차이는 없다 

Reactjs Code Snippet확장 프로그램을 설치 했다면 컴포넌트 코드를 간편하고 빠르게 생성할수 있다 

rsc를 입력하고 Enter를 눌러보자 

코드를 생성하고 나면 컴포넌트 이름이 선택된 상태로 나타난다 

여기서 수정하면 컴포넌트 이름을 변경할수 있고 Tap을 눌러 선택을 해제 할수 있다 

참고로 클래스형 컴포넌트는 rcc를 입력해서 사용할수 있다 

 

모듈 내보내기 및 불러오기 

모듈내보내기 (export)

방금 작성한 컴포넌트에서 맨 아래 코드를 확인해보자 

export default MyComponent;

이 코드는 다른 파일에서 이 파일을 import할때 위에서 선언한 MyComponent클래스를 불러오도록 설정한다 

 

모듈 불러오기 (import)

App컴포넌트에서 MyComponent를 불러와서 사용해보자 

기존 App컴포넌트에 있던 코드를 모두 지우고 다음과 같이 입력 한다 

import React from "react";
import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent />;
};

export default App;

위코드에서 import 구문을 사용하는 두번째 줄은 우리가 만든 MyComponent를 불러온다 

코드를 저장하고 브라우저에서 다음과 같이 랜더인 되었는지 확인하자 

Props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할때 사용하는 요소이다 

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트 (현 상황에서는 App컴포넌트가 부모 컴포넌트)에서 설정 할수 있다 

 

JSX내부에서 props 랜더링 

우선 MyComponent를 수정해 해당 컴포넌트에서 name이라는 props를 랜더링 하도록 설정해보자 

props값은 컴포넌트 함수의 파라미터로 받아와서 사용할수 있다 

props를 랜더링 할때 JSX내부에서 { }기호로 감싸 주면 된다 

import React from "react";

const MyComponent = (props) => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

export default MyComponent;

 

컴포넌트를 사용할때 props값 지정하기 

App컴포넌트에서 MyComponent의 props값을 지정해 보자 

App.js의 코드를 다음과 같이 수정한다 

import React from "react";
import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent name="React" />;
};

export default App;

 

 

props 기본값 설정 : defaultProps

방금 설정한 name 값을 지우고 다시 저장해본다 

import React from "react";
import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent />;
};

export default App;

현재 name 값을 지정하지 않았기 때문에 브라우저에는 '안녕하세요, 제이름은 입니다'라는 내용이 보인다 

지금처럼 props값을 따로 지정하지 않았을때 보여줄 기본값을 설정하는 defaultProps에 대해 알아보자 

이 값을 설정하는 방법은 다음과 같다 

import React from "react";

const MyComponent = (props) => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

MyComponent.defaultProps = {
  name: "기본 이름",
};

export default MyComponent;

파일을 저장하고 브라우저에 다음 내용이 나타났는지 확인해보자 

 

태그 사이의 내용을 보여주는 children

리액트 컴포넌트를 사용할때 컴포넌트 태그 사이의 내용을 보여주는 prps가 있다 

바로 children이다 

App컴포넌트를 수정해보자 

import React from "react";
import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent>리액트</MyComponent>;
};

export default App;

위 코드에서 MyComponent태그 사이에 작성한 리액트라는 문자열을 MyComponent내부에서 보여주려면 props.children값을 보여 줘야 한다 

import React from "react";

const MyComponent = (props) => {
  return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다. <br />
      children값은 {props.children}
      입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "기본 이름",
};

export default MyComponent;

브라우저에 다음과 같은 결과물이 나올것이다 

 

 

비구조화 할당 문법을 통해 props내부 값 추출 하기 

참고 : velog.io/@public_danuel/destructuring-assignment

참고 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

참고 : velog.io/@recordboy/ES6-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9Destructuring-Assignment

현재 MyComponent에서 props값을 조회 할때마다 props.name, props.children과 같이 props. 이라는 키워드를 앞에 붙여주고 있다 

이러한 작업을 더 편하게 하기 위해 ES6 비구조화 할당 문법을 사용하여 내부 값을 바로 추출 하는 방법을 알아보자 

MyComponent를 다음과 같이 수정하자 

import React from "react";

const MyComponent = (props) => {
  const { name, children } = props;
  return (
    <div>
      안녕하세요, 제 이름은 {name} 입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "기본 이름",
};

export default MyComponent;

이렇게 코드를 작성하면 name값과 children값을 더 짧은 코드로 사용할수 있다 

방금 사용한 객체에서 값을 추출 하는 문법을 비구조화 할당 (destructuring-assignment)라 한다 

이 문법은 구조 분해 문법이라도 불린다 

함수의 파라미터 부분에서도 사용할수 있다 

만약 함수의 파라미터가 객체라면 그 값을 바로 비 구조화 해서 사용하는것이다 

코드를 다음과 같이 수정해보자 

import React from "react";

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
MyComponent.defaultProps = {
  name: "기본 이름",
};

export default MyComponent;

함수형 컴포넌트에서 props를 사용할때 이렇게 파라미터 부분에서 비구조화 할당 문법을 사용할 예정이다