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

Jung Hyewon·2021년 7월 2일
0

Study.React

목록 보기
6/7
post-thumbnail
post-custom-banner

📌 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 이용 가능하다.
  • 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

    • 처음에 로딩될 때 호출 && 인자값이 업데이트 될 때 호출
      componentDidMountcomponentDidUpdate를 합친 느낌
      두번째 인자를 빈 값으로[] 호출을하면 처음에만 호출하고 두번째 인자에 값을 넣으면 그 값이 변경될때마다 호출됨
    • 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>
  );
}
profile
위대한 포부가 위대한 개발자를 만듭니다.
post-custom-banner

0개의 댓글