React Beginning Chep4

Posted by : at

Category : react   study


Disable eslint

eslintDisable

  • 개발진행시 터미널 warning 경고문 제거하는 방법 /* eslint-diable */ App.js 적용

React State함수를 사용해서 Count 증가

  • useState
  • ~~~javascript let [data, chagne] = useSate([‘test’, ‘test2’]);

{data[0]} <span onClick={ ()=> { change(data + 1)}}></span>증가


-  이벤트 리스터 onClick를 사용하도록 하고 문법은 ```onClick={클릭될때 실행할 JS}``` 식이다. 
-  React 에서 이벤트 리스너에 state를 사용할 경우 ```1+1``` 이런식으로 사용할 수 없고 
-  ```()=>{}``` 은 ```function (){}```과 동일한 ES6 문법이다. 
-  내용안에 ```state 값에 선언한 변경문 (여기서는 change)``` 으로 사용이 가능 하다. 
-  ```change(data + 1) ``` 문법에 따라서 state 를 변경이 가능하며 이렇게 변경 진행해야지 재렌더링이 가능해진다. 

## React setState 함수활용의 값 변경 
~~~javascript 
let [postion , postionChange] = useState(['서울','부산','경남','창원']); 

  function 함수 () {
    var newArray = [...postion]; //deep copy 
    newArray[0]='포항'
    postionChange( newArray);
  }
  • 리렌더링을 진행을 하기 위해서는 State를 사용하여야 된다
  • state 의 변경할 값이 존재할경우

About Ghosts
Ghosts

Hi I a Ghosts, a Web Developer and Designer.

Email : memories109@gmail.com

Website : https://ghostsdev.github.io/

About Ghosts

개인정보 공유, 포트폴리오 제작 , 블러그 관리, 하루 일상, 사진 갤러리

Star
Useful Links