클래스형 컴포넌트, 함수형 컴포넌트 비교

일반적 차이

클래스형

• state, lifeCycle 관련 기능사용이 가능하다.
• 메모리 자원을 함수형 컴포넌트보다 조금 더 사용된다.
• 임의 메서드를 정의할 수 있다.

함수형

• state, lifeCycle 관련 기능사용이 불가능하다, [대신 Hook을 통해 해결]
• 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다.
• 컴포넌트 선언에 좀 더 편하다.

---

State 값 사용시 차이

State - 컴포넌트 내부에서 바뀔 수 있는 값

classClassComponentextendsComponent {
  state = {
    number:this.props.initNumber
  }

  render() {
return {
       <div className="container">
          <h2>Class styleComponent</h2>
          <p>Number : {this.state.number}</p>
       </div>
     }
  }
}

클래스형 컴포넌트

• constructor 안에서 this.state 초기값 설정 가능

constructor(props) {
super(props);

this.state  = {
     monsters: [],
     userInput: "",
   };
}

• constructor 없이 바로 state 초기값을 설정할 수 있다.

classMonstersextendesComponent {
   state = {
     monsters: [],
     userInput: "",
   }
}

• 클래스형 컴포넌트의 state는 객체 형식

this.state = { monsters: [], userInput: "", };

• this.setState 함수로 state의 값을 변경할 수 있다.

onClick = {() => {
this.setState({number: number * 1});
}}

함수형

• 함수형 컴포넌트에서는 useState 함수로 state를 사용한다.
• useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태를 나타낸다.
• 두 번째 원소는 상태를 바꿔주는 함수

const [message, setMessage] = useState('');

---

props의 사용 차이

props란

• 컴포넌트의 속성을 설정 할 때 사용하는 요소
• props의 경우 부모 컴포넌트가 설정해서 자식 컴포넌트는 읽기만 할 수 있는 값(읽기 전용, 단뱡향 데이터 흐름)
• 컴포넌트 자체 props를 수정해서는 안됨

클래스형 컴포넌트

this.props로 값을 불러올 수 있다.

classMyComponentextendsComponent {
     render() {
  const {name, favoriteNumber, children} =this.props;
  return (
         <div>
            가입된 이릉은 {name} 입니다. <br/>
            children 값은 {children}입니다 <br/>
            가장 좋아하는 숫자는 {favoriteNumber} 입니다.
         </div>
      )
   }
}

함수형 컴포넌트

props를 불러욜 필요 없이 바로 호출할 수 있다.

const MyProps = ({ name, children}) => {

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

---

이벤트 핸들링

클래스형 컴포넌트

• 함수 선언시 에로우 화살로 바로 선언이 가능하다.
• 요소에서 적용하기 위해서는 this값을 붙여줘야 한다.

handleChange = e => {
this.setState({
     message: e.target.value
   })
}

handleClick = () => {
   alert(this.state.message);
this.setState({
     message:''
   })
}

render() {
return (
    <div>
      <h1>이벤트 헨들링</h1>
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력하세요"
        value={this.state.message}
        onChange={this.handleChange}
       />
       <button onClick={this.handleCLick}>확인</button>
     </div>
  )
}

함수형 컴포넌트

• const 키워드 + 함수 형태로 선언해줘야 함
• 요소에 적용하기 위해 this 값은 필요하지 않음

const onClick = () => {
  alert(message);
  setMessage('');
}

const onKeyPress = e => {
if (e.key === "Enter") {
      onClick();
   }
};

return (
   <div>
     <h1>이벤트 KeyPress</h1>
     <input
       type="text"
       name="message"
       placeholder="아무거나 입력해주세요"
       value={message}
       onChange={onChangeMessage}
       onKeyPress={onKeyPress}
     />
     <button onClick={onClick}>확인</button>
)