6장. Class형 컴포넌트와 Function형 컴포넌트 (+Hooks)

📌 Class형 컴포넌트 특징

• Component를 상속 받아야 한다.
  class Test extends React.Component{//todo..}
• 자신의 state, props, function 등 모두 this 키워드를 사용하여 접근해야한다.
  this.state.name / this.props.age / this.handleIncrement
• class 안 render() 함수가 포함되어야한다.

class Test extends React.Component{ 
 render(){ 
   return (<h1>Hello, OnceDeveloper</h1>)
 }
}

• 멤버변수나 fucntion등은 Class가 만들어질때 한 번만 할당이 되어지고 변경되는 경우 render함수만 반복적으로 호출된다.
• LifeCycle API 이용 가능하다.
  • 공식 사이트 link : LikeCycle API
• state
  • 선언 및 초기화
    state = { name : 'OnceDeveloper' }
  • 변경 - setState()
    this.setState({name : 'TwiceDeveloper'});

class Test extends React.Component {
  state = {
    name : 'OnceDeveloper'
  }
  changeState = () => {
   this.setState({name : 'TwiceDeveloper'});
  }
  render{
    return(<div>hello~ {this.state.name}<div>);
  }
}

[ Test code ]

class Test extends React.Component {
  state = {
    name : 'OnceDeveloper'
  }
  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}</h1>
        <h1>I am {this.props.age} years old</h1>
      </div>
    );
  }
}

📌 Function형 컴포넌트 특징

• 클래스형 컴포넌트보다 선언하기 수월하다.
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다.
• this 키워드를 사용하지 않아도 접근 가능하다.
• props는 파라미터로 받아 사용 가능하다.
• render() 함수를 포함하지 않아도 된다.
• state, 라이프사이클 API를 사용할 수 없다.
• 단순히 화면에 값을 출력해주고싶을 때 사용한다.

[ Test code ]

• Function
  funtion test(props){}

function test(props) {
  return <h1>Hello, {props.name}</h1>;
}

• Arrow Function
  funtion test = () => {}

function test = (props) =>{
  return <h1> Hello, {props.name}</h1>;
}

📌 React Hooks

• 공식 사이트 link => React Hooks
• Class 형태였던 Component를 Function을 통해 만들 수 있게 해주는 API
• Function형 컴포넌트의 장점을 갖고 Class형 컴포넌트와같은 기능들을 Hooks를 이용하여 사용할 수 있게됨.
• Class형 컴포넌트와 달리 Function형 컴포넌트는 props나 state가 변경이 되면 코드블락 안 전체 코드가 반복되어짐 => Hooks를 이용해 이전의 값들을 저장할 수 있음.
• state
  • 선언 및 초기화
    const ['state로 설정할 이름', 'state를 변경할 이름'] = useState('설정할 state 초기값')
    const [age, setAge] = useState(20);
  • 변경
    state 선언 시 2번째 인자로 설정한 이름으로 호출 (위의 예시로 setAge)
    setAge(21);

• useEffect

  • 처음에 로딩될 때 호출 && 인자값이 업데이트 될 때 호출
    componentDidMount 와 componentDidUpdate를 합친 느낌
    두번째 인자를 빈 값으로[] 호출을하면 처음에만 호출하고 두번째 인자에 값을 넣으면 그 값이 변경될때마다 호출됨
  • useEffect()
    mount될 때 + update될 때 rendering
  • useEffect(,[])
    mount될 때만
  • useEffect(,[age])
    mount될 때 + age가 update되는 경우에만 rendering

[ Test code ]

function Test = (props) => {
  const [age, setAge] = useState(20);
  const changeState = () => {
   setAge(21);
  }
  //useEffect(changeState());
  //useEffect(changeState(),[]);
  useEffect(changeState(),[age]);
   return (
     <div>
       I'm {age} years old.
       my name is {props.name}.
      <button onClick={() => changeState()}>
        버튼 클릭
      </button>
    </div>
  );
}