React 어렵다! 어렵지만 재밌다!
근데 지금 react 블로그 한 4개 밀려있음.........
........
주말의 내가 알아서 하겠지?

---

Component 란?

component(컴포넌트)란 엄청 쉽게 말했을때 재사용 가능한 UI 조각들을 말한다.

예를 들어, 위스타그램 클론에서 했던 로그인 페이지의 ID, PW input 창이라던가...
메인 페이지의 댓글창, 피드 목록 이라던가....
( 물론 이 안에서도 더 잘게 쪼갤 수 있다. button icon logo 이런 식으로!!
물론 막 나누면 안되고, 단독으로도 기능하고 1번 이상 재사용한다면!)

이런 요소들을 component로 만들어서 같은 디자인의 요소가 필요할 때마다 재사용할 수 있다.

하나의 component에 필요한 html, css, javascript를 모두 합쳐서 만들 수 있기 때문에 component만 독립적으로도 충분히 기능할 수 있다.

사실, component는 함수와 비슷하다!🤭

JavaScript에서(사실 다른 프로그래밍 언어에서) 함수는 기능이 독립적이고, 재사용할 수 있다.

component는 이렇습니다!! 짝짝짝~ 하고 마무리하기에는....

LifeCycle API 라던가, 알아야할게 많이 남았지만...😭
요건 다음에 더 자세히 정리하기로 하고, 처음은 일단 component 라는게 있구나~ 재사용할 수 있는 거구나~ 정도로만 알고 바로 코드 쳐보면서 익히는걸로!!!!

---

Component 만들기

React에서는 함수형과 클래스형, 두종류의 component가 있다.

함수형은 다음 프로젝트때 사용한다고 하니 우선 클래스형만 정리!!!

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

(함수형은 대충 이렇게 생겼다. 진짜로 함수형....)

:: class component

import React from 'react';

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default App;

혹은 이렇게도 쓸 수 있다.

import React, {Component} from 'react';

export default class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• render() : Component 클래스 안에 필수로 들어가야 하는 메소드이다!
  this.props this.state 에 접근할 수 있고, react 요소를 반환한다. (아래의 return으로!!)

return(
대충
긴
코드
);

이렇게 ( ) 로 묶어주는 경우는 뭘까? 안에 들어가는 코드가 많아서 묶어주는걸까?
NONO!!!!
react의 component들은 최상위 태그 하나로 감싸지기 때문에, 한줄로 취급된다.
실제로 괄호 없이
return <>엄청 긴 코드</> 를 해봐도 잘 동작한다.
다만, 사람 입장에서 한줄로 쭉 적힌 코드는 읽을수가 없기 때문에...............
코드를 멀티 라인으로 보기 위해 ( ) 를 적어주는것!
( 중요한 내용은 아니지만 재밌어서.....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ )

import React from 'react';

class Welcome extends React.Component {
  // state = { test: 'react' };
  constructor(props) {
  super(props);
    this.state = {
      test: 'react!'
    };
  }
  render() {
    const {name, num} = this.props;
    return (
      <h1>Hello, {name}</h1>;
      <h2>My number : {num}</h2>
      <p>{this.state.test}</p>
	);
  }
}

export default App;

state, props 에 대해선 글을 새로 쓸거니까 넘기고!

여기 예제에서 중요한건 바로 constructor() 와 render 아래줄에서 this.props 를 정의해준것!

• constructor() : class 내에서 가장 먼저 실행되는 메서드 (실행자 메서드)
  constructor 안에는 super() 메서드가 주로 먼저 들어온다.
  constructor가 가장 먼저 불러와지기 때문에 state를 초기화(초기값 설정)하면 좋다.

• 주석 처리 한 곳 처럼 state = { } 으로 바로 state 값을 설정해도 된다.

super 를 사용하는 이유에 대해 잘 정리한 블로그가 있어 첨부한다! 다들 꼭 한번 읽어보세요!
< 출처 : https://velog.io/@honeysuckle/ >

---

개발 왕초보 코린이입니다!
이 내용은 혼자 동영상 강의&구글링을 통해 배운 내용을 정리하는 것으로, 제가 이해하고 넘어간 개념이 틀렸거나 더 보충할 개념이 있다면 댓글 남겨주시면 정말 감사하겠습니다!!