[React] 기본문법(1)

React에 대한 기본적인 문법과 팁에 대해서 정리해보았습니다😀😀

 

 

• state를 변경하려고 하면 무조건 setState를 사용해서 변경해주어야함
  • 이유: state 값에 변경이 생긴다면 이 값을 토대로 render()를 호출해줘야 하는데 setState를 사용하면 React에서 자동으로 render function을 호출해줌
• setState를 사용할 때 state안에 default값들을 선언할 필요는 없다.

class App extends React.Component{
    state = {
        isLoading: false,
    };
    componentDidMount() {
        setTimeout(() => {
            this.setState({ isLoading:true, book:true })
        }, 3000);
 }

 

• state가 필요없으면 class가 아닌 function component을 사용하면 된다

 

• 자식 component에서 props를 받으려면 props를 인자로 받아줘야한다.

function Card(props){
    return {
        <div>{props.id}</div>
    }
}

 

• component에서 메서드를 만들 때 this 바인딩을 위해 화살표 함수로 메서드 정의

// 여기서 화살표 함수로 해줘야 this에 component가 바인딩됨
addCard = () => {
    axios({
      url: "https://dog.ceo/api/breeds/image/random"
    })
    .then((res) => {
      console.log(res.data.message, this)
      this.setState(current => ({ images: '1'}))