[React] Function Components

해당 포스트는 코드아카데미의 React 101 강의의 필기입니다.

지금까지는 자바스크립트 class의 형태로 컴포넌트를 만들어왔다면, 이제 자바스크립트의 함수 형태로 컴포넌트를 만들 수 있음 ➡️ Function Components

최신 리액트에선 함수형 컴포넌트도 클래스형 컴포넌트가 할 수 있는 모든 일을 할 수 있는데다가, 더 간결하게 만들 수 있음!

render(){}을 없애라

Class Component

export class Friend extends React.Component {
  render() {
    return <img src="https://content.codecademy.com/courses/React/react_photo-octopus.jpg" />;
}

Function Component

export const Friend = () => {
    return <img src="https://content.codecademy.com/courses/React/react_photo-octopus.jpg" />;
}

render method 필요 없이 그냥 return 값으로 JSX 문법을 적어주면 됨

props 주기

함수형 컴포넌트에서 props에 접근하기 위해선 props를 함수의 parameter로 준다
그러면 this 키워드 없이 props.propertyName 식으로 접근할 수 있다

export const NewFriend = props => {
	return (
    <div>
      <img src={props.src} />
    </div>
  );
}