[리액트]컴포넌트

#컴포넌트 기능

- 데이터가 주어졌을 때 이에 맞춰 UI를 만들어 줌

- 라이프사이클 API를 이용해 컴포넌트가 화면에서 나타날 때와 사라질 때, 변화가 일어날 때 주어진 작업들을 처리 가능하게 함

- 임의 메서들ㄹ 만들어 특별한 기능을 붙여줄 수 있음

 

1. 컴포넌트

- 함수 컴포넌트

- 클래스형 컴포넌트 

 

 

2. 클래스형 컴포넌트

- 함수 컴포넌트와 차이점은, state 기능 및 라이프 사이클 기능을 사용 가능, 임의 메서드 정의가능

- 그러나 함수 컴포넌트는 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결됨. 즉, 완전히 클래스형 컴포넌트처럼 사용할 수 있는 것은 아니지만 다른 방식으로 비슷한 작업을 할 수 있게됨.

- render 함수 필수

- 예시)

class App extends Component {

 render() {

   const name = 'hello';

   return <div className="hello"> {name} </div>;

 }

}

 

3. 컴포넌트 생성하기

- 파일 만들기

- 코드 작성하기

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

 

4. props

- properties를 줄인 표현

 

- props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능

 

- JSX 내부에서 props 렌더링 / 컴포넌트를 사용할 때 props 값 지정

#예시 - MyComponent.js

const MyComponent = props => {

  return <div> hello, my name is {props.name} </div>;

}

export default MyComponent;

 

#예시 - App.js

import MyComponent from '.MyComponent';

 

const App = () => {

  return <MyComponent name="React" />;

}

export default App;

 

#브라우저에서 확인

hello, my name is React

 

- props 기본값 설정 : defaultProps