[React18] setState()

 

State를 올바르게 사용하기 

 

1. State 값을 직접 수정하지 마라

this.state.comment = 'Hola"  (X)  잘못된 사용방법

 * state 값을 직접 수정할 수 있는것은 Constructor(props){} 안에서만 지정할수 있다.

 

2. setState() 를 사용해라 

 >> setState( updater [,callback] )   

 >> updater와 callback 함수를 인자로 가지고 있으며, callback은 생략이 가능하다.

 >> updater는 다음과 같은 형태를 가지는 함수이다.

  -- (state, props) => stateChange

 state는 변경사항이 적용 되는 시점에 컴포넌트가 가지는 state에 대한 참조로,  대신 전달된 state, props를 기반으로 새로운 객체를 만들어 표현해야 한다. 이때 전달된 state와 props는 최신값이 보장된다.

   -- setState(stateChang, [ callback])

  >> this.setState( { count : 2 } )

 만약 이전 state 값에 기반하여 state를 수정한다면 updater 함수형태를 사용하여 수정하는것이 좋습니다.

 >> setState( (state) => { return { count : state.count + 1 } } )

 >> setState( state => ({ count : count + 1}

 

 

++ 화살표 함수

 

표현식

>> param이 1개일 경우 괄호는 선택사항  2개 이상일 경우 필수

(param1) => { statements } 

param1 => { statements }

(param1, param2) => { statements } 

(param1, param2) => { return statements } 

>> 매개 변수가 없을 함수는 괄호가 필요

() => { statements }

 

객체 리터럴을 반환하기 위해서는 본문을 괄호 속에 넣음

params => ({ count : 3 })

(parma1 = defaultValue1, param2 = defaulValue2.....) => { statements }

var f = ( [a,b] = [1,2], {x : c} = {x = a+b}) => a+b+c;   // f() = 6

 

var name = [ 'stella', 'nova', 'hogarden', 'havenBori', 'chair' ]

name.map(function(value) { 

     return value.length;

});  // [6,4,8,9,5]

 

// 함수표현을 화살표함수로 변경할 수 있다

name.map( (value) => { return value.length } );

 

// 화살표 함수의 유일한 문장이 return일경우 return 과 중괄호를 생략할 수 있다.

name.map( value => value.length );