React.js study - 1

⭐️ 컴포넌트

클래스형컴포넌트와 함수 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 이후 배울 state기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것입니다

함수 컴포넌트 ->

import './App,css';

function App(){
const name = '리액트'
return <div className="react">{ name } </div>;
}
export default App;

클래스형 컴포넌트 ->

import { Component } from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>;
}
}

컴포넌트를 선언할 수 있는 두 가지 방법 중 어느 상황에 함수 컴포넌트를 사용해야 할까요?

⭐️ 장점
함수 컴포넌트의 장점을 나열해 보면 다음과 같습니다. 우선 클래스형 컴포넌트보다 선언하기가 훨씬 편합니다. 메모리 자원도 클래스형 컴포넌트 보다 덜 사용합니다. 또한, 프로젝트를 완성하여 빌드한 후 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작습니다.
⭐️ 단점

함수 컴포넌트의 단점으로는 state와 라이프사이클 API 사용이 불가능하다는 점인데요. 이점은 리액트 v16.8 업데이트 이후 Hooks 라는 기능을 통해 해결되었습니다.
리액트 공식 메뉴얼에서는 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있습니다.

⭐️ 화살표 함수 문법(arrow function)

화살표 함수는 ES6 문법에서 함수를 표현하는 새로운 방식으로 주로 함수를 파라미터로 전달 할 때 유용합니다.

모듈 내보내기(export)
모듈 불러오기(import)
ex) MyComponent를 내보내고 다른 모듈에서 받아오는 방법

export default MyComponent
import MyComponent from './MyComponent';

⭐️props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.

위에서 처럼 App.js 와 MyComponent.js 가 있다고 가정하고 예제를 사용할 경우에는

MyComponent.js 에서 const MyComponent = props => { return <div>안녕하세요, 제 이름은 {[props.name](http://props.name/)}};입니다. </div>;
App.js 에서 값을 지정하는 방법은 const App = () => { return <MyComponent name="React" />; }; 이렇게 설정하면 브라우저에서는 "안녕하세요, 제이름은 React입니다." 라고 출력이 된다.
이때 MyComponent.js 에서 props 값이 없을경우 기본값을 지정할 수 있는데 이는
MyComponent.defaultProps = { name: '기본 이름' }; 이렇게 지정할 수 있다.

⭐️태그 사이의 내용을 보여주는 children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여 주는 props가 있는데, 바로 children 이다.

App.js 부분에서 return <MyComponent>리액트</MyComponent>; 이렇게 설정하고
MyComponent.js 부분에서 <div> children 값은 {props.children}입니다. </div> 할 경우 브라우저에서
children 값은 리액트입니다 라고 나오게 된다.

비구조화 할당 문법으로 props를 짧고 간결하게 표현

MyComponent.js props를 사용할 때마다 props. 으로 사용해야 하는데 이것이 귀찮을 경우에는 다음과 같이 사용이 가능하다.

const MyComponent = props => { const { name, children } = props;
return ( <div> 안녕하세요, 제이름은 {name}입니다. <br /> children 값은 {children}입니다. </div>

이렇게 사용이 가능하다 이렇게 객체에서 값을 추출하는 문법을 비구조화 할당이라고 한다. 이 문법은 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있다.
코드를 다음과 같이 수정이 가능하다.

const MyComponent = ({ name, children }) =>
return ( <div> 안녕하세요, 제이름은 {name}입니다. <br /> children 값은 {children}입니다. </div>