React 2

얼렁뚱땅 공부했던 React 다시 공부하기~~!

Render함수

props와 state를 바탕으로 컴포넌트를 그리며, props와 state가 변경되면, 컴포넌트를 다시 그린다.

Props

props : 컴포넌트 외부에서 컴포넌트에게 주는 데이터

function컴포넌트에서 사용하기

function Component(props){
	return(
    <div><h1>{props.message}</h1></div>
    );
}
ReactDOM.render(
  <Component message="Hi!"/>, 
  document.querySelector("#root")
)

class컴포넌트에서 사용하기

class Component extends React.Component{
	render(){
      return(
    	<div><h1>{this.props.message}</h1></div>
      );
    }
}

ReactDOM.render(
  <Component message="Hi!"/>, 
  document.querySelector("#root")
)

props 기본값 설정하기 1

class 컴포넌트의 경우, 컴포넌트 안에 static키워드를 사용해 지정할 수 있다.

  static defaultProps = {
  	message: "기본값1",
  }

props 기본값 설정하기 2

class 컴포넌트와 function 컴포넌트 둘 다 사용이 가능하다.

Component.defaultProps = {
	message: "기본값2",
}

State

State : 컴포넌트 내부에서 변경할 수 있는 데이터
=> 변경이 일어나면 랜더가 다시 일어날 수 있다.

class컴포넌트에서 사용하기

class Component extends React.Component{
  // state는 항상 객체형태이다.
  state = {
  	count: 0,
  };
	render(){
      return(
         	<div>
        		<h1>{this.props.message}</h1>
        		<P>{this.state.count}</P>
      		</div>
      );
    }
	componentDidMount(){
    	setTimeout(()=>{
          	// state를 직접 변경하지 않는다.
        	//this.state.count = this.state.count +1;
          	this.setState({
          		count: this.state.count +1
          	})
        },1000);
    }
}

ReactDOM.render(
  <Component message="Hi!"/>, 
  document.querySelector("#root")
)

state 초기화하는 방법 1

class Component extends React.Component{
  state = {
  	count: 0,
  };
}

state 초기화하는 방법 2

class Component extends React.Component{
	constructor(props){
    	super(props);
      this.state = { count:0 }
    }
}

setState 사용하는 방법 1

componentDidMount(){
    setTimeout(()=>{
        this.setState({
          count: this.state.count +1
        })
    },1000);
}

setState 사용하는 방법 2

componentDidMount(){
    setTimeout(()=>{
     this.setState((previousState)=>{
     	const newState = {count : previousState.count + 1}
        return newState;
     })
    },1000);
}

Event Handling

camelCase로만 사용할 수 있다. (ex. onClick)
이벤트에 연결된 JS코드는 함수로 작성한다.
실제 DOM요소들에만 사용이 가능하며, 리액트 컴포넌트에 사용하면 props로 전달한다.

function 컴포넌트에서 사용하기

function Component(){
	return(
    	<div>
        	<button onClick={()=>{console.log("click")}}>클릭 </button>
        </div>
    ) 
}
ReactDOM.render(
  <Component message="Hi!"/>,document.querySelector("#root")
)

class 컴포넌트에서 사용하기

class Component extends React.Component {
  state = {
  count: 0,
  }
	render(){
      return(
        <div>
       	 <button 
           onClick={()=>{
              console.log("click");
              this.setState((state) => ({
                ...state, 
                count: state.count + 1,
              }));
            }}
          >
          	클릭 
          </button>
        </div>
        );
    }
}

onClick안에 함수는 메서드로 따로 빼서 사용한다

class Component extends React.Component {
  state = {
  count: 0,
  }
	constructor(props){
    	super(props);
      	this.click = this.click.bind(this);
    }
	render(){
      return(
        <div>
       	 <button 
           onClick={this.click}
          >
          	클릭 
          </button>
        </div>
        );
    }
	click(){
      console.log("click");
      this.setState((state) => ({
        ...state,
        count: state.count + 1,
      }));
    }
}

constructor안에 this를 bind해 사용하기도 하지만, click()함수를 arrow함수 로 사용하면 constructor를 사용하지 않아도 된다.

render 순서보기

Parent Component render start ➡ Parent Component useState ➡ Parent Component render end ➡
Child Component render start ➡ Child Component useState ➡ Child Component render end ➡ Child Component useEffect ➡
Parent Component useEffect ➡