React:: 리액트 컴포넌트 이해하기

1. View
   • 실제 구현은 JSX코드로 하지만 나중에 JavaScript로 변환된다.
2. Logic
   • 버튼이 눌렸을 때 어떻게 동작해야 하는지
3. Styling
4. State
   • 특정 컴포넌트 내부에 저장되는 값. 컴포넌트 내부에 저장되는 데이터
   • 훅이라는 개념이 도입된 후 함수형 컴포넌트에도 State 사용 가능
5. Props
   • 다른 컴포넌트로 데이터를 전달할 때 사용

함수형 컴포넌트

function SecondComponent(){
  return(
    <div className='SecondComponent'>SecondComponent</div>
  )
}

클래스 컴포넌트

class ThirdComponent extends Component{ //클래스 컴포넌트

  render(){//렌더링 메서드 컴포넌트의 일부로 보여주고 싶은 텍스트를 반환 
          // 컴포넌트를 import하고 사용할 수 있음. 

  return(
    <div className='ThirdComponent'>ThirdComponent</div>
  )
}
}

• 컴포넌트는 각자의 모듈, 각자의 파일 안에 있는 게 이상적이다(하나의 자바스크립트 파일)
• 각 컴포넌트에는 State라는 게 있는데 특정 컴포넌트에 대한 데이터나 정보이다
• 리액트 초기에는 클래스컴포넌트만 state를 가질 수 있었는데 리액트16.8부터 함수도 가능