[React] 코딩애플 blog -6

오늘의 포스팅은 리액트의 옛날 문법 배우기이다. 예전 버전 리액트의 문서들은 어렵게 표현되어있다.

이 문법을 배우는 이유는 리액트를 다룰 때 자주 사용했던 코드들은 대부분 class를 이용한 컴포넌트를 사용했다.

class Profile extends React.Component{
constructor(){
  super();
}
render(){
  return (
    <div>프로필입니다.</div>
  )
}
}

위 코드는 컴포넌트를 만드는 기본 문법이다.

컴포넌트를 사용하는 방법은 <Profile />로 동일하다.

 

클래스란 ❓

변수와 함수 보관의 덩어리를 의미한다.

 

extend란 ❓

react의 성질을 물려받아서 이런 클래스를 만들어주겠다! 라는 의미이다.

 

이때 세부설정이 필요한데, state는 constructor함수 안에 supter을 써주고 그 아래에 써준다.

이때 constructor는 클래스 만들때 초기 변숫값을 저장하는 꼭 필요한 공간이다. 이때는 this를 사용해준다.

state를 꺼내 쓰는 방법은 리턴 아래에 {this.state.state명] 을 작성한다.

class Profile extends React.Component {
  constructor() {
    super();
    this.state = { name: "Lee" };
  }
  render() {
    return (
      <div>
        <h3>프로필입니다.</h3>
        <p>저는 {this.state.name} 입니다.</p>
      </div>
    );
  }
}

이름이 데이터바인딩 된 것을 볼 수 있다.

과거의 문법을 보니 현재 문법이 쉽고 편하다는 것을 알 수 있다!

 

 

 

이제 추가적으로 기능을 개발해보자!

버튼을 눌렀을때 이름이 변경이 되도록 하고 싶다면 ❓

 

최신 문법에서는 state랑 함께 만들었던 변경 함수를 썼지만 과거에는 setState라는 리액트의 함수를 이용했다.

class Profile extends React.Component {
  constructor() {
    super();
    this.state = { name: "Lee" };
  }
	changeName(){
	this.setState({ name: "Pack" });
	}
  render() {
    return (
      <div>
        <h3>프로필입니다.</h3>
        <p>저는 {this.state.name} 입니다.</p>
        <button
          onClick={() => {
            this.setState({ name: "Pack" });
//this.changeName.bind(this) ->함수 실행됨
          }}
        ></button>
      </div>
    );
  }
}

현재 배우는 state변경 함수는 state를 완전히 대체해 버리는 함수다.

하지만 setState는 원하는 state를 대체하는 것이 아닌, 설정만 해주고 원본은 건드리지 않는다는 차이가 있다.

함수로 빼서 사용하고 싶다면 render 위쪽에 함수를 만들어준다.

 

 

🚨여기서 중요할 점은 state, 함수 setstate 등등을 갖다 쓸땐 꼭 this를 써줘야한다!🚨

 

 

 

함수를 사용할 때

this.changeName.bind(this) 

이런 식으로 bind(this)를 써줘야 하는데, 이것이 귀찮다면 함수를 만들 때 화살표 함수 표현(arrow function) 형태로 만들어 주면 된다.

changeName = () => {
	this.setState({ name: "Pack" });
	}

this.changeName로 실행이 가능해진다.

만약 arrow function으로 바꾸지 않고 this.changeName을 사용하게 되면 오류가 나타난다. 이유는 자바스크립트에선 function을 쓴다면 안에 있는 this는 재 정의가 되기 때문 ❗

 

그래서 this가 재정의되지 않게 👀

그래서 1. 함수를 쓸 때 this.changeName.bind(this) 이렇게 사용

아니면 2. 함수를 아예 arrow function으로

 

 

 

오늘의 교훈 : 신문법을 쓰자!👍

리액트 공식 문서도 컴포넌트를 만들 땐 어려운 class문법이나 this 키워드를 사용하지 않고 function 문법으로 사용하자

 

 

 

+) arrow function과 this 키워드의 관계

자바스크립트에선 () => {} (arrow function)과 그냥 function(){} 은 거의 같은 의미입니다.

하지만 한 가지 차이점이 있는데

arrow function을 쓰시면 안에 있는 this값을 재정의해주지 않습니다. 바깥에 있던 this의 값을 그대로 끌고 와서 사용합니다.

하지만 function(){}을 쓰시면 this값이 새롭게 변화합니다.

같은 함수 문법이지만 이런 차이가 있습니다.

그래서 arrow function은 내부의 this키워드 값을 변화시키지 않고 싶을 때 사용합니다.