책과 함께] State + button 생성해서 count값 알아보기

<참고한 책>

* 책의 모든 내용을 업로드할 수 없기 때문에 간단한 부분만 업로드한 후,

   직접 클론 코딩한 내용은 비공개로 업로드 하겠습니다.

 

 

state란

* 동적 데이터를 다룰 때 사용합니다.

- props는 동적 데이터 다루지 못 합니다.

* 사용하기 위해서는 앞의 function A( )형식이 아닌, 클래스형 컴포넌트에서 사용해야 합니다.

* setState()로 새로운 데이터를 업로드하면, 리액트는 이전 state와 비교해 새로운 데이터만 업로드합니다.

 

 

 

1. state 사용을 위해 클래스형 컴포넌트 만들기

 

  클래스형 컴포넌트의 기본 뼈대 : 상속

class App extends React.Component{

}

 

 

2. JSX 반환하기 -> render( )이용.

 

  앞에서 실습한 App의 형식은 class가 아니라 function이었습니다.

  따라서 class내에서 JSX 반환하기 위해서는 render( )를 이용합니다.

JSX(Javascript XML)란?

-  내부 리소스에 사용된 대부분의 *.js 파일은 JSX 파일입니다.
-  JavaScript 언어의 확장으로 생각하시면 됩니다.


출처 : https://medium.com/@jang.wangsu/rn-jsx-%EB%9E%80 %EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-f967f98ea9df

class App extends React.Component{
	render( ){ //render함수로 JSX 반환하기
    		return <h4> componentClass, state, render() <h4/>;
    }
}

 

 

3. 결과

 

 

 

4. state 정의하고, count 값 추가하여 화면에 숫자 띄우기

 

  count값은 state = { }; 내에 ---> count : 1, 또는 count : 0 등으로 선언합니다.

  render( ) 내에 반환할 카운트 값은 ---> return ~~ : {this.state.count} </h4> 등으로 선언합니다.

class App extends React.Component{
	state = {
    	count : 0,
    };
	render( ){ //render함수로 JSX 반환하기
    		return <h4> componentClass, state, render() : {this.state.count} <h4/>;
    }
}

 

 

5. button 눌러서 count 값 바꾸기

 

  return 값을 여러 개로 늘리기 위해 아래처럼 코드를 변경해줍니다.

  Add와 Minus 버튼을 생성합니다.

 

  짧은 코드로 한 번 아래에 예시를 들어보았습니다.

render( ){   
	return(
    	<div> 
          <h4>~~~</h4>
          <button>버튼명</button>
        </div>
    );
}

나머지 코드는 비공개로 업로드하겠습니다.

책에 다 나와있으니깐요...

 

add 눌렀을 때, count값 2로 변경	minus 눌렀을 때, count값 -1로 변경

 

실습을 통해,
두 가지 장점을 익힐 수 있었습니다.

1) 리액트는 화면 구성이 빠릅니다. -> 필요한 부분만 바뀝니다.
2) 새로고침이 일어나지 않고, 바뀝니다.