React - 클래스 컴포넌트

Class Component

state(필드 대체)를 가지고 있고 이를 수정할 수 있다.

라이프 사이클에 따른 생명주기 메서드를 사용할 수 있다.

 

state값이 변경되면 리액트는 변화를 인식하고 그에 맞는 화면을 출력하기 위해 component를 리랜더링한다. 

그래서 state값을 변경할 때는 state에 어떤 숫자를 넣어서 변경하는 게 아닌

this.setStatus() 함수를 이용해서 새로운 status값을 넣어주면 된다.

#여기서 랜더링이 안 되게 하려는 이유는 불필요한 리랜더링이 발생할 경우 불필요한 계산과 작업이 이루어지기 때문에 컴포넌트의 성능이 저하되기 때문

 

생명주기(라이프 사이클)

react의 component 라이프 사이클은 생성(mount), 업데이트(Update), 제거(Unmount) 단계로 나누어져 있고

각 단계마다 componentDidMount, componentDidUpdate, componentWillUnmount 같은 메서드를 사용해서 DOM을 조작하거나 리소스를 정리할 수 있는 기능을 말한다.

class Comment extends Component {
  constructor(props){
    super(props)
    this.state = {}
  }
  
  componentDidMount(){
    console.log(`${this.props.id}의 componentDidMount 실행됨`)
  }

  componentDidUpdate(){
    console.log(`${this.props.id}의 componentDidUpdate 실행됨`)
  }

  componentWillUnmount(){
    console.log(`${this.props.id}의 componentWillUnmount 실행됨`)
  }

  render() {
    return (
      <div style={styles.wrapper}>
        <span style={styles.commentText}>
            {this.props.message}
        </span>
      </div>
    )
  }
}

export default Comment

js에서는 class에 필드영역이 없기 때문에

저장하고 싶은 데이터를 state라는 객체에 key-value형태로 저장한다.

---

비구조화 할당

: 객체나 배열의 특정 값을 더 간편하게 추출해서 변수에 할당할 수 있게 해주는 문법으로

객체에서 필요한 값만 꺼내서 사용하고 싶을 때 사용함

const commentList = this.state.commentList;

이걸 비구조화 할당 문법을 사용하면 아래의 코드가 된다

 

const { commentList } = this.state;

설명을 하자면

this.status라는 객체에서 commentList라는 속성만 꺼내서 commentList라는 변수에 저장하는 것

 

응용하면 여러개의 속성들을 변수들에 한번에 추출할 수 있다

const { commentList, data1, data2 } = this.state;

this.status에 있는 속성들을 한번에 변수에 할당한 코드.

만약 이 코드를 기존의 코드처럼 작성하려면 상당히 길어진다

 

const commentList = this.state.commentList;
const data1 = this.state.data1;
const data2 = this.state.data2;

이렇게 3줄이나 된다.

 

잘쓰면 가독성도 좋고 간결하게 작성도 가능한 문법이 바로 비구조화할당