useState

항해하면서 Node.js라는것도 처음 알았고 , 자바스크립트도 처음 배운 나에게 뭔가 여기서 새로운걸 하나 더 추가한다는건 굉장히 버거운 일이였다. 그래서 최대한 내것에 집중하고 다른 파트에는 눈길을 안줬다. 그런데 이번에 회사에서는 다르다. 따로 프론트엔드가 없는 팀에 있기 때문에 그 말은 곧 다 할 줄 알아야한다는.. 깊게는 아니지만 읽고 수정할 수 있는정도까진 해놓아야 한다는 생각에 기초부터 해보자고

백엔드 담당으로써는 프론트가 뭐라뭐라 하는것만 대충 끄덕거릴뿐 그 용어에 크게 집중하지 않는데(나만그런가) 이번에 리액트 코드를 보면서 그런 것들이 우당탕탕 쏟아지니까 정신이 없었다. 

UseState부터 알아보자면 

let [title, titleFunc] = useState('Starbucks');

자료를 잠깐 저장하기 위해 사용하는데 왜 변수말고 state를 사용하냐면 state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링해주기 때문이다. 그러므로 변경할 일 없는 내용들은 state를 사용할 필요가 없다.

• state의 가장 큰 장점 :  state가 변경될 때마다 자동으로 state와 관련된 html이 재렌더링이 된다는 것

useState는 console로 찍어보면

console.log(useState(1)) // 결과: [1,f]

앞쪽에는 값이 저장되고 함수가 하나 생성된다. 저 위의 코드에서 title에는 '글제목' 이 titleFunc 에는 title변경을 도와주는 함수이다.

<h4 onClick={()=> {titleFunc(title === 'Twosome'? 'Starbucks': 'Twosome')}}>{ title }</h4>

이런식으로 작성하게 되면 누를때마다 Twosome과 Starbucks를 오가게된다.

...중략, 일단 state는 여기까지