리액트기초 ( component, props )

필자는 공부를하는 학생이기에 클래스형 컴포넌트로 어느정도 익히고 함수형으로 넘어갈 생각입니다.

컴포넌트의 종류

리액트 컴포넌트는 두가지 형태가 있습니다

• 클래스형 컴포넌트
  • state 와 life cycle 함수를 사용할 수 있다.
• 함수형 컴포넌트
  • render 함수가 필요없고, 컴포넌트 마운트속도가 빠르고, 코드가 간결하여 가독성이 좋다.

React 16.8 부터 HOOK 개념이 도입되었고, HOOK를 이용해 state(useState) 와 life cycle(useEffec) 를 편하게 이용하게 되면서부터 함수형 컴포넌트가 각광받기 시작했고 현재 주를 이루고있다.

---

클래스형 컴포넌트

클래스형 컴포넌트는 This 로 인한 치명적인 단점이 있습니다.

import React, { Component } from 'react';
class App extends Component {
  render() {
    return ( JSX.. );
  }
}
export default App;

---

함수형 컴포넌트

function App() {
    return ( JSX.. );
}
export default App;

결론 : 함수형 컴포넌트에 HOOK 도입 이후로 함수형컴포넌트가 주를 이룬다. 클래스형 컴포넌트를 사용안한다는것이 아니니 알고있어야한다.

---

모듈 불러오기(import), 모듈 내보내기(export)

import "컴포넌트명" from "컴포넌트 경로"
* 컴포넌트명 : 외부 컴포넌트를 import 하는 컴포넌트 내부에서 사용할 이름입니다.
* 컴포넌트 경로 : 불러올 외부 컴포넌트의 경로와 컴포넌트명 입니다.

export default 컴포넌트명; // 모듈내보내기
* 컴포넌트명 : 내보낼 컴포넌트 명입니다. 파일 이름과 같지 않아도 상관없으나 return 하는 컴포넌트의 이름과 같아야합니다.

모듈 불러오기 import 된 컴포넌트는 내부에서 사용자가 이름을 정의해서 사용가능, 경로는 무조건 맞춰야함	모듈 내보내기 현재 작성중인 파일명과 관계없이 내보낼 컴포넌트 함수의 이름만 맞추면 됨

이해를 돕기위해 위와같이 작성했습니다. 내보내는 이름, 불러오는 이름, 불러와서 사용할 이름을 다르게 만들면 닌자코드가 되겠죠^^..?

---

props ( properties )

컴포넌트의 속성을 설정할 때 사용 : import한 컴포넌트( 부모컴포넌트 ) 에서 export 된 컴포넌트 ( 자식컴포넌트 ) 의 props 를설정 합니다.

Props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 자식은 읽기 전용으로만 사용가능

부모컴포넌트
import MyComponent from "./MyComponent";

function App() {
  return (
    <div className="App">
      <MyComponent name="김태형" age={31}/> //여러개 사용 가능합니다. 미설정시 자식컴포넌트에서 설정한 기본값이 출력됩니다. 숫자형태는 위와같이 보냅니다.
    </div>
  );
}

export default App;

자식컴포넌트
import React from "react";

const MyComponent = (props) => {
  return <div>{props.name} 입니다. 나이는 {props.age} 입니다.</div>;
};

MyComponent.defaultProps = { //부모 컴포넌트에서 props 미설정시 사용될 기본값입니다.
  name: "미설정",
  age : "나이모름",
};

export default MyComponent;

특별한 기능을 가지고있는 props.children 이란 녀석이 있는데요.
이녀석은 가지고있는 기능이 좀 특별해서 따로 포스팅해야할거같습니다. 아직 이해도 잘 안되구요^^..

import MyComponent from "./MyComponent";

	const App = () => {
  		return (
   		 <MyComponent>children props의 설정값</MyComponent>
  		);
};

export default App;

import React, { Children } from "react";

const MyComponent = (props) => {s
  return (
    <div>
     children 값은{props.children} 입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  children: "자식불명",
};

export default MyComponent;

비구조화할당, 구조분해할당 문법

ES6에 도입된 문법으로 배열, 객체의 속성을 추출하여 그 값을 개별 변수에 담을 수 있게하는 표현식 입니다.

배열구조분해 할당
	
	기본 구조분해할당
	const kakao = ["라이언","무지","콘",["네오","프로도"]];
	const [lion, muzi, con, aniFriend] = kakao;
	
	console.log(lion);//'라이언'
	console.log(muzi);//'무지'
	console.log(con);//'콘'
	console.log(aniFriend);//['네오','프로도']

	----------------------------------------------------------
    
    스프레드연산자를 이용한 나머지할당방법, 스프레드는 반드시 마지막요소로 사용해야합니다.
	const [lion,...aniFriend] = kakao;
	console.log(lion);//'라이언'
	console.log(aniFriend);//'무지','콘',['네오','프로도']

객체구조분해 할당

	기본구조분해할당, 반드시 같은 key 값에 할당해야합니다.
    const kakao = {lion:"라이언",muzi:"무지",con:"콘",aniFriend:{neo:"네오",prodo:"프로도"}};
	const {lion,muzi,con,aniFriend} = kakao;
	
	console.log(lion);//라이언
	console.log(muzi);//무지
	console.log(con);//콘
	console.log(aniFriend)//{neo:'네오',prodo:'프로도'}

	----------------------------------------------------------
    
	key값을 변경하여 할당하는 방법
	const {lion:char1,muzi:char2,con:char3,char4:niFriend} = kakao;
	
	console.log(char1);//라이언

	----------------------------------------------------------
    
    스프레드연산자를 이용한 나머지할당방법, 스프레드는 반드시 마지막요소로 사용해야합니다.
    스프레드연산자의 경우 속성명을 편한대로 정할 수 있습니다.
    const kakao = {lion:"라이언",muzi:"무지",con:"콘",aniFriend:{neo:"네오",prodo:"프로도"}};
	const {lion,...chars} = kakao;
	
	console.log(lion);//라이언
	console.log(chars);//{muzi:"무지",con:"콘"}
	

주의사항 2차원배열, 객체내부 객체는 참조관계가 끊어지지 않기 때문에 구조분해 할당후에도 사본 변경시 원본이 변경됩니다.

참조관계를 끊기위해서 구조분해 할당시에 이렇게 하는 방법도 있습니다.

const kakao = {lion:"라이언",muzi:"무지",con:"콘",aniFriend:{neo:"네오",prodo:"프로도"}};
const {lion,…chars} = JSON.parse(JSON.stringify(kakao));

---

비구조화 할당과 props

객체비구조화 할당

const MyComponent = (props) => {
  const { name, age } = props;
  return (
    <div>
      {name} 입니다. 나이는 {age} 살 입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "미설정",
  age: "나이불명",
};

export default MyComponent;

함수파라미터 비구조화할당

const MyComponent = ({name, age}) => {
  return (
    <div>
      {name} 입니다. 나이는 {age} 살 입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "미설정",
  age: "나이불명",
};

export default MyComponent;

---

propTypes를 통한 props 검증

import PropTypes from 'prop-types'; //prop-types import

const MyComponent = ({name, age}) => { //함수 파라미터 비구조화할당
  return (
    <div>
		{name} 입니다. 나이는 {age} 살 입니다.
    </div>
  );
};

MyComponent.defaultProps = { // 기본값 지정
  name: "미설정",
  age: "나이불명",
};

MyComponent.propTypes = { //props 타입 지정
	name: propTypes.string,
  	age : propTypes.number.isRequired // 필수항목 지정
}

export default MyComponent;

PropsTypes 종류

• array : 배열
• arrayOf(PropTypes.타입) : ~ 로 이루어진 배열
• bool : boolean
• func : 함수
• number : 숫자
• string : 문자열
• symbol : 심볼
• node : 렌더링할수 있는 모든것 ( 숫자,문자열,JSX코드, 등 )
• instanceOf : 특정 클래스의 인스턴스
• oneOf : 주어진 배열 요소중 값 하나
• oneOfType : 주어진 배열 요소중 타입하나
• objectOf : 객체의 모든 키 값이 인자로 주어진 propType인 객체
• shape : 주어진 스키마를 가진 객체
• any : 아무종류

---

클래스형 컴포넌트의 props

클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props 를 조회하면 됩니다. 또한 defaultProps와 propTypes는 함수형 컴포넌트와 같은 방식으로 설정합니다.

import React, { Component } from "react";
import propTypes from "prop-types";

class MyComponent extends Component {
  render() {
    const { name, age } = this.props;
    return (
      <div>
        제 이름음 {name} 입니다. 나이는 {age} 입니다.
      </div>
    );
  }
}

MyComponent.defaultProps = { //클래스 내부에서 설정하는 방법 있습니다.
  name: "미설정",
  age: "나이불명",
};

MyComponent.propTypes = { //클래스 내부에서 설정하는 방법 있습니다.
  name: propTypes.string,
  age: propTypes.number,
};
export default MyComponent;