220407 웹TIL) 함수형/클래스형 컴포넌트,state,setState()

1. 함수형 컴포넌트 

function App() {
	return (
    	<div> <-최상위 태그 필요
        
         ~ 
         
         </div>
  ) }

이런 느낌이라면 (함수형 컴포넌트는 return문이 JSX 반환) 

클래스형 컴포넌트는 

class App extends React.Component { 
	render() { 	
    	return ~; 
     }
}

클래스형 컴포넌트는 render() 함수가 JSX를 반환한다. 

 

리액트는 클래스형 컴포넌트의 render() 함수를 자동으로 실행시켜준다. 다시 말해 render() 함수는 우리가 직접 실행하지 않아도 실행되는 함수. 

 

> 우리가 클래스형 컴포넌트를 사용하는 이유는 state 를 사용하기 위해서이다. 

state는 객체 형태의 데이터이고 state를 사용하려면 반드시 클래스형 컴포넌트 안에서 소문자를 이용하여 state라고 적으면 된다. 

 

 

2. state의 쓰임 

state는 동적 데이터를 저장할 수 있어야 한다. 동적이라는 것은 값을 바꿀 수 있다는 말인데, 즉 값을 바꿀 수 있도록 코드를 작성해야 한다. (예를 들면 사용자 동작에 따라 state의 count를 바꿀 수 있도록) 

 

react는 state를 직접 변경하지 못하게 한다.

    add = () => {
     // console.log('add'); 
     this.state.count=1;
        };

   minus = () => {
      //console.log('minus'); 
      this.state.count=-1;
    };

위와 같이 1,-1과 같은 값을 직접 지정하면 

Add와 Minus 버튼을 눌러도 아무런 반응이 없다. 

리액트는 state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력한다. 

그런데 개발자가 state를 직접 변경하는 경우에는 render() 함수를 다시 실행하지 않는다. 리액트는 이런 방식으로 state를 직접 변경할 수 없도록 제한한다. 

 

그렇다면, state를 간접적으로 변경하는 방법은? 

setState() 함수를 사용해서 state 값을 간접적으로 변경할 수 있다. 

 

setState()는 내가 원하는 새로운 state를 인자로 넘겨주면 된다. 

이는 리액트가 setState() 함수의 호출을 감시하고 있기 때문이다 (호달달!)

setState() 함수가 동작하면 state가 새로운 값으로 바뀌고, 이어서 render() 함수를 동작시켜 화면을 업데이트한다. 

 

 

1과 -1 값이 즉각적으로 바뀌는데 필요한 부분만 화면 구성이 빠르게 바뀌므로 리액트의 장점이 강하게 느껴지는 부분이다.