문법 2

[React] State

그 동안 JS 변수 var, let, const에 대해서만 배웠었는데 리액트에서 쓰는 State라는 변수를 알아보자 ​ let title_1 = 'YNWA'; {title_1} 이렇게 사용하던 변수를 let [title_1, b] = useState('YNWA') {title_1} 이렇게도 사용할 수 있다. ​ 왜 굳이 더 길게 써야하느냐? 변수가 변경됐을 때 새로고침없이 재렌더링이 가능하기 때문이다. ​ ​ 기존 변수를 사용했을 경우엔 새로고침을 해야 유저가 변하는 부분을 확인할 수 있지만 State를 사용했을 시 변수가 변경돼도 홈페이지를 리로드하지않고 바로 변화시킬 수 있다 ​ 사실상 react를 사용하는 핵심이유라고 생각한다. ​ 또한 let [TeamName, a] = useState(['LIV..

React/문법 2022.05.09

[React] JSX문법

언젠가 꼭 학습해야하는 걸 알고 있었지만 바닐라 JS를 완벽하게 마치고 하려다보니 그 핑계로 자꾸 미루는 거 같아서 오늘부터 당장 배우기 시작했다. import blahblah; function App(){ return ( // 원하는 코드 )}; 리액트 설치와 환경세팅은 생략하고 기본 틀은 이렇다 ​ 주석처리된부분에 본인이 원하는 코드를 집어 넣으면 되는데 HTML파일을 따로 두지 않고 JS파일내에서 html 태그를 사용하며 바로 동작 시킬 수 있다. ​ 그로인한 문법의 변화는 감안해야하고 이 문법을 JSX 라고 한다. ​ ​ JSX의 특징 1) // 원하는 코드 html 에서는 class명을 삽입할때 class = "aa"였지만 JSX 에서는 className="" 으로 선언한다. ​ ​ 특징2) f..

React/문법 2022.05.09
반응형