Component

Component란

컴포넌트를 한 마디로 정의하자면 앱의 기능을 캡슐화하는 React의 기본 단위.
쉽게는 HTML 요소를 반환하는 함수와 같다고 생각해도 된다.
따라서 컴포넌트는 독립적이고 재사용 가능한 코드의 조각이다.
컴포넌트의 종류로는 함수형 컴포넌트와 클래스형 컴포넌트가 존재한다.

1. React에서 페이지를 구성하는 최소 단위
2. Component의 이름은 대문자로 시작
3. Class Component / Function Component로 나뉨
4. Controlled Component / Uncontrolled Component

• CC는 사용자의 입력을 받아 데이터 관리, 각 input의 입력 값을 state로 직접 관리
• UC는 데이터를 리액트로 관리하지 않고, 직접 엘리먼트에서 긁어오겠다.

Component를 만들고 다른 Component에서 자유롭게 활용 가능, 이름은 항상 대문자로 시작

함수형 컴포넌트

함수형 컴포넌트 선언 후, ReactDOM.render() 를 이용해 렌더링을 해주면 된다.
매개변수로 함수형 컴포넌트를 <함수 이름 /> 와 같은 형태로 넘겨주고 요소를 표기해 줄 곳을 함께 넘겨줌

function Introduce(){
  return <h2>Hi, I am Elice!</h2>
}
ReactDOM.render(<Introduce/>, document.getElementById('root'))

클래스형 컴포넌트

클래스형 컴포넌트도 마찬가지로 렌더링을 해주면 되며 구조만 약간 다르다.
class 선언 시 React.Component 의 메소드들을 사용하기 위해 extends를 이용해 React.Component 를 상속받도록 구현해야 함. 상속 시, 해당 클래스형 컴포넌트에서 render() 메소드가 구현되어야 하는데 HTML을 반환해주면 된다.

class Introduce extends React.Component {
  render() {
    return <h2>Hi, I am elice!</h2>;
  }
}

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

언제 사용하는지?

함수형 컴포넌트와 클래스형 컴포넌트가 언제 사용되는지?

함수형 컴포넌트는 단순히 HTML UI를 반환하는 간단한 자바스크립트 함수로 자주 사용된다. 단순히 데이터를 받고 렌더링을 하면 끝이기 때문에 비상태형 컴포넌트 라고도 한다.

즉, 상태를 사용하지 않고 함수에 대한 결과를 반환하는데, 여기서 상태란 React의 State를 의미하며 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체이다. 쉽게 말하자면 컴포넌트의 현재 저장된 값이 State라고 보면 된다.

클래스형 컴포넌트는 이러한 논리와 상태를 구현할 때 사용되어 상태형 컴포넌트라고 한다. HTML을 반환하는
render() 메소드가 구현되어, 복잡한 UI 로직을 구현할 때 클래스형 컴포넌트가 사용된다. 특히 위에서 언급한 State를 사용할 때 반드시 클래스형 컴포넌트로 구현되어야 한다.

DOM 태그

컴포넌트 렌더링 시 넘겨주었던 <함수 혹은 클래스 이름 /> 은 아래와 같은 엘리먼트를 만들어서 렌더링 시 넘겨주어도 괜찮다. 해당 태그를 DOM 태그라고 한다.

const element = <Introduce />

이러한 DOM 태그를 아래처럼 정의할 수도 있다. name 을 엘리먼트에서 함께 넘겨주고 함수형 컴포넌트에서 props 를 이용해 넘겨준 name 을 받을 수 있다. props 가 메소드의 매개변수 역할을 한다고 생각하면 된다.

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

const element = <Introduce name="Elice" />
ReactDOM.render(element, document.getElementById('root'));

컴포넌트의 재사용

컴포넌트를 적절히 합성하고 추출하여 재사용 하는 것이 좋다. 코드의 재사용이 중요한 이유는 같은 동작을 하는 코드를 반복할 경우, 코드의 가독성이 떨어지며 다른 사람이 이해하기 어려워지기 때문이다. 더불어 코드를 수정할 경우 여러 곳에 작성된 코드를 한 번에 수정할 수 있다.

컴포넌트 합성을 이용하면 작은 기능을 하는 컴포넌트를 결합하여 더 복잡한 기능 구축 가능. 컴포넌트는 기능이 작을수록 재사용이 쉽기 때문에 컴포넌트의 합성과 추출이 중요!

컴포넌트 합성

컴포넌트는 컴포넌트 내에 다른 컴포넌트를 호출하여 참조하는 것이 가능하다.

function Effy(){
  return <h2>Hello, I'm Effy.</h2>
}

function Question() {
  return (
    <div>
      <h1>Who are you?</h1>
      <Effy />
    </div>
  )
}

// index.js
ReactDOM.render(<Question />, document.getElementById('root'))

컴포넌트 추출

한 컴포넌트가 복잡하다면 일부를 추출해서 분리하는 것이 가독성을 높임

function Avatar(props){
  return (
    <img className = "Avatar" 
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  )
}

function UserInfo(props){
  return (
    <div className="UserInfo">
      <Avatar user={props.user}/>
      <div className="UserInfo-name">{props.user.name)</div>
    </div>
  )
}

function Comment(props){
  return(
    <div className="Comment">
      <UserInfo user={props.author}
      <div className="Comment-text">{props.text}</div>
      <div className="Comment-date">{formatDate(props.date)}</div>
    </div>
  )
}