[TIL] React-Hooks란?

Stateless Functional Components

. Class형 대신 JavaScript의 Function와 동일한 형태로 Component를 정의하여 사용할 수 있는데 이를 Function component 혹은 React-hooks라고 말한다. 하지만 React Hooks이 Class component를 100% 대체하는 것은 아니며 선택적으로 사용해야 한다는 것을 명심해야 한다.

1. constructor, render가 필요없다.

.class형

 export class Apps extends Component {
   constructor() {
     super();
     this.state = {
     }
   }   
     
   render() {
     returen (
       <div className="Apps">
         <h1>Hello World!</h1>
       </div>
     )
   }
 }

.function형: render가 필요없다!

 const Apps = () => {
   return (
     <div className="Apps">
       <h1>Hello World!</h1>
     </div>
   )
 }

2. this가 필요없다.

.class형

export class NewFriend extends React.Component {
	render() {
		return (
      <div>
        <img src={this.props.src} />
      </div>
    );
	}
}

ReactDOM.render(
  <NewFriend src="https://content.codecademy.com/courses/React/react_photo-squid.jpg" />,
  document.getElementById('app')
);

.function형

 const NewFriend = (props) => {
   return (
     <div>
       <img src={props.src} />
     </div>
   )
 };
 
 ReactDOM.render(
  <NewFriend src="https://content.codecademy.com/courses/React/react_photo-squid.jpg" />,
  document.getElementById('app')
);

사용 규칙

. 최상위에서만 Hook을 호출해야하며 조건문/반복문/중첩문 안에서는 호출하지 않는다.
. 함수 Component 내에서만 Hook을 호출해야 한다. (*Custom hook에서는 사용가능)

구조 분해 할당

. Object, Array 둘 다 가능함.

const alphabet = {
a : "a",
b : "b"
}

const { a , b } = alphabet