React Component의 State

State란?

컴포넌트의 상태 값
state와 props는 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 합니다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고 state는 컴포넌트 내에서 정의하고 사용합니다.

constructor 예제

class Button extends React.Component{
	constructor(){
    	super();
        
        this.state = {
        	clicked: false
        }
    }
    
    render() {
    	return (
        	<div className="btn"
            	onClick={()=>{this.setState({ clicked: !this.state.clicked })}}>
                {this.state.clicked ? '좋아요' : '싫어요'}
            </div>
        );
    }
    
    ReactDOM.render(
    	<Button />,
        document.getElementById('root')
    );
}

render() { 이 부분이 실행할 함수가 들어가는 부분이다. }
div를 클릭하면 clicked라는 상태를 수정한다. 여기서 setState() 함수는 state를 업데이트한다.

{clicked: !this.state.clicked}라는 말은 현재 clicked의 반대로 (toggle처럼) 저장한다는 의미이다.
{this.state.clicked ? '좋아요' : '싫어요'}
clicked state가 true면 좋아요, false이면 싫어요를 보여준다

constructor()는 class의 instance가 생성될 때 항상 호출되는 함수(생성자)이다. 초기화할 값들을 constructor()에서 초기값을 지정해준다. super()라는 키워드를 써야 React.Component class에 있는 메소드를 사용할 수 있다.

일반 state 예제

import React, {useState} from 'react'; // state는 새로고침 없이 수정될 시 자동으로 랜더링 됨, 자주 바뀌는 중요한 데이터를 변수 말고 state 사용 권장
import logo from './logo.svg';
import './App.css';

function App() {

    var [a,b] = [10,100]; // a=10, b=100이 들어감

    let [글제목, 글제목변경] = useState('남자 코트 추천'); // a='남자 코트 추천', b=데이터를 변경하는 함수가 들어감
    let [글제목2, 글제목변경2] = useState(['남자 코트 추천', '강남 우동 맛집']); // a='남자 코트 추천', '강남 우동 맛집' 으로 array로 들어감, b=데이터를 변경하는 함수가 들어감
    let [like, setLike] = useState(0);


    let posts = '고기고기';

    function 함수(){
        return 100
    }

    function 제목바꾸기(){
        var newArray = [...글제목];
        newArray[0] = '여자 코트 추천'
        글제목변경(newArray);
    }

    return (
        <div className="App">
          <div className="black-nav">
            <div style={{color: 'blue', fontSize: '30px'}}>개발 Blog</div>
          </div>
            <button onClick={글제목}></button>
            {/*<img src={logo} />*/}
            <div className={'list'}>
                <h3>{글제목2[0]} <span onClick={ ()=>{setLike(like+1)} }>❤</span> {like} </h3>
               <p>9월 14일 발행</p>
                <hr/>
            </div>
          {/*<h4>{함수()}</h4>*/}
            <Modal />
        </div>
    );
}

/* Component - 반복출현하는 HTML 덩어리들, 자주 변경되는 HTML UI 등.. 재렌더링이 많이 일어나는 부분 */
/* Component의 return에는 HTML의 한 태그로 감싸야되는데 <> </> 로 감싸면 여러 태그를 사용 가능(fragment 문법)*/
function Modal(){
    return (
        <div className={"modal"}>
            <h2>제목</h2>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    );

}

export default App;