REACT Chapter 03

3-1. 컴포넌트란?

1) 컴포넌트의 뜻

• React는 컴포넌트라는 단위로 화면이 구성
• 스스로 상태를 관리하는 캡슐화된 코드 조각
• 하나의 JSX를 반환하는 함수

2) 컴포넌트 제작

[App.js]
import Hello from './Hello.js';
import World from './World.js';
//js 붙이지 않아도 자동으로 읽어옴

export default function App() {
  return (
    <div>
      <Hello></Hello>
      <World></World>
      //<World /> 이렇게도 사용 가능
    </div>
  );
}

[Index.js]
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

[Hello.js]
export default functuon Hello() {
	return <h1>Hello</h1>

[World.js]
export default function World() {
	return <h2>World</h1

3) JSX와의 차이점

• 컴포넌트는 기본적으로 함수이기 때문에 자신만의 고유한 로직이 들어갈 수 있다.
• 스스로 상태를 가질 수 있다.(상태가 변하면 알아서 반영됨)

import

• 모듈을 불러오기

export

• 모듈을 내보내기

4) 컴포넌트 생성 시 주의사항

• 컴포넌트 이름은 무조건 PascalCase = 단어의 시작 문자는 대문자로

  MyComponent
  ArtuclePage
  UserProfile

• 의미단위로 쪼개어 파일을 분리할 것
• 최상의 컴포넌트 이름은 일반적으로 App

  index.js

  • entry point
  • 최종 컴포넌트를 DOM에 render (ReactDOM.render)
    App.js
  • 모든 컴포넌트들의 root 컴포넌트

3-2. Props

1) Props의 개념

• Props는 properties의 줄임말
• 부모 컴포넌트에서 자식 컴포넌트로 내려주는 데이터

//App 컴포넌트에서 MyComponent 컴포넌트에 value라는 속성으로 텍스트를 전달
function App(){
	return (
    	<div>
        	<MyComponent value={'test'}/>
        </div>
    );
}

funtion MyComponent(props) {
	return <div>{props.value}</div>;
}

//컴포넌트에 감싸주는 방법
funtion App() {
	return (
    	<div>
        	<MyComponent>
        <h1>value</h1>
        	</MyComponent>
        </div>
    );
}
function MyComponent(props) {
	return <div>{props.children}</div>;
}

2) Props의 활용 팁

• 구조분해할당 구문 활용
• 특정 Props에 기본 값을 지정 가능
• Pros는 읽기 전용

3) 실습

[App.js]
import Heading from './components/Heading';

export default function App() {
  return (
    <div>
      <Heading type ="h1">Hello<Heading/>
      <Heading tyle = "h2">World</Heading>
    </div>
  );
}

[Index.js]
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

[Heading.js]
export default funtion Heading{props} {
	if(props.type === 'h2') {
    	return <h2>{props.children}</h2>
    }
    
    return <h1>{props.children}</h1>;
}

3-3.State

1) State의 개념

• 컴포넌트 내부에서 사용되는 일종의 변수

  State 값이 변하면 컴포넌트가 리렌더링 됨
  렌더링 사이클에서 값이 보존됨

  리렌더링 : 특정 조건이 발생하면 다시 렌더링을 진행

  • 내부 상태(state) 변경 시
  • 부모에서 전달받은 값(props) 변경 시
  • 중앙 상태값(Context value 혹은 redux store) 변경 시
  • 부모 컴포넌트가 리렌더링되는 경우

• 컴포넌트 스스로 상태를 관리하게 만드는 존재

2) State가 만들어지는 과정

[App.js]
// - value를 state로 만들기
// - Increase 버튼 함수 만들기 (+함수형 인자로)
// - Reset 버튼 함수 만들기

import{ useState } from "react";

export default function App() {
  const [value, setState] = useState(0);
  // 초기값 0으로 설정
  // value : 현재 상태 값(여기서는 0부터 시작)
  // setState : 상태를 업데이트하는 함수. 이 함수가 호출되면 React는 상태를 업데이트하고 컴포넌트를 다시 렌더링

  return (
    <div>
      <h1>value: {value}</h1>
      <button 
      	onClick = {() => {
        	console.log('Increase value1', value);
      		value = value + 1;
            console.log('Increase value2', value);
      	}}
      >
      	Increase value
     </button>
      <button onClick={() => {
      		setValue(0)
      }}>Reset value</button>
    </div>
  );
}

[index.js]
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

3-4.클래스형 컴포넌트 vs 함수형 컴프넌트

1) 클래스형 컴포넌트

• 클래식 문법으로 구현한 옛날 컴포넌트

  useState와 같은 Hooks는 React 버전 16.8부터 등장
  즉, 그 전에는 함수형 컴포넌트에서 state를 사용할 수 없었고, 클래스형 컴포넌트만 state를 가질 수가 있었음.
  클래스의 멤버 변수로 state 정의
  render라는 멤버 함수에서 반환한 값(JSX)이 화면에 그러짐

• 아직도 사용되고 있고 라이브러리와 서비스에서 활용되고 있기에 학습

2) 함수형 컴포넌트

• 구조가 클래스보다 단순한 함수를 사용하기로 결정하며 대세로 사용되는 중
• 코드 재활용성에 유리한 새로운 컴포넌트 제작 방식

3) HooKs의 등장 이유

• 클래스형 컴포넌트의 단점을 보완하기 위해 함수형 컴포넌트에 지급된 개념
• 초기에는 클래스형 컴포넌트가 기본이었음
• 하지만, 클래스형 컴포넌트의 몇 가지 문제로 인해 새로운 방식 고안(이해하기 어려움, 코드 재활용성 떨어짐 등)
• 지금은 Hooks가 완전히 정착하여 기본형으로 사용됨(클래스형은 레거시로 볼 수 있음)

4) 실습 코드

[React.js]
import React, { Component } from 'react';

export default class App extends Component {
//클래스형 컴포넌트 구현
  state = {
    value1: 0
  };
  
  //이렇게 state 정의
  //const [value1,setValue1] = useState(0);
  //const [value2,setValue2] = useState(0);

  constructor(props) {
    super(props);
    this.state = {
    //this로 멤버 함수 호출
      value: 1
    };
  }

  resetValue() {
    this.setState({ value: 0 });
  }

  render() {
    return (
      <div>
        <h1>value: {this.state.value}</h1>
        <button
          onClick={() => {
            this.setState((state) => ({
              value: state.value + 1
            }));
          }}
        >
          Increase value
        </button>
        <button
          onClick={this.resetValue.bind(this)}
          //this.resetValue만 사용한다면 resetValue를 호출했을 때 setState 함수를 가지고 있지 않아서 오류가 발생. -> bind 사용하면 App 클래스를 호출하여 오류 없음.
        >
          Reset value
        </button>
      </div>
    );
   }
  }