[React]리액트 state 마음대로 변경하기

 

리액트에서는 useState를 활용하여 마음대로 값을 변경할 수 있다.

하지만, 유의할 점 몇 가지를 짚고 넘어가자.

 

리액트의 state OR props 값이 바뀌면 그 state값을 가지고 있는 Component의 render()함수가 다시 호출되고

render()밑엣것들도 다시 다 호출된다. 즉, 화면이 다시 리랜더링된다는 뜻.

 

- 어떤 Component가 실행될 때 render라고하는 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 코드는

constructor라는 함수가 있다면 해당 코드가 제일 먼저 실행되면서 초기화를 담당한다. 

초기화가 끝나면 this.state = {

      subject:{title:'WEB', sub:"World"}

}로 초기화시킬 수 있다.

class App extends Component {

	constructor(props){
    	super(props);
    }
}

render(){
	return (
    	<div className="App">
        	<Subject titile="WEB sub="world wide web!"></Subject>
            <TOC></TOC>
            <Contenet title="HTML" desc="HTML is HyperText Markup lg"></Content>
        </div>
     );
    } 
 }
 
 export default App;
            
    

 

 

 

/* eslint-disable */
import React,{ useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  let[글제목,글제목변경]=useState( [ '남자코트추천','강남우동맛집','파이썬독학' ] );
  let[count,index] = useState(1);

  function 제목바꾸기(){
    var newArray = [...글제목];
    newArray[0] = '여자코트 추천';
    글제목변경(newArray);
  }
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
          <h3>{ 글제목[0] }</h3>
          <h3>
          <span 
          onClick={ ()=>{  제목바꾸기()  }} > ❤️ </span> { count }</h3>
          <p>2월 17일 발행</p>
        <hr />
      </div>

      <div className="list">
  <h1>{ 글제목[1] }</h1>
  <h3>{ 글제목[2] }</h3>
        </div>      
        <hr />
    </div>
  );
}

export default App;

다음과 같은 코드가 있을 때

'남자코트 추천' -> '여자코트 추천' 으로 바꾸고 싶다면 ?

ES6문법인 spread를 활용하여 바꿔준다

절대로 직접적인 수정은 하면 안된다. 흔히 하는 실수

ex) newArray[0] = '여자코트 추천';  이렇게 바로 변경해버리는데 이러한 행동은 삼가합시다.

 

그럼 어떻게 하냐 ? 

-> 변경 함수를 사용합니다.

"deep copy" 를 통하여 즉 ES6 문법인 " [...배열이름] " 배열 전체를 복사 후 (참조가 아닙니다) 해당 값의 인덱스를 수정하여 다시 넣어주는 방식으로 해야합니다. !

 

리액트 대 원칙인 모든 data들은 직접 수정을 하면 안되기 때문입니다 ( immutable data )