리액트를 쓰면 좋은 법과 간단한 문법.
learn 1:
리액트에서는 쓰는 jsx문법으로 태그들을 줄일 수 있다.
learn 2:
즉, 데이터 바인딩이 쉽다!
document.getElementById.innerHTML(‘’)처럼 복잡하게 객체에 접근할 필요가 없음.
{ 변수명 }과{ function() }으로 불러오는게 가능하다.
즉, { 변수명, 함수 등 }으로 표현할 수 있음.
learn 3:
jsx문법에서는 src, id, href의 속성에 { 변수명, 함수 등 } 넣을 수 있다.
예를 들어서 이미지를 import하려고 하면
import logo from ‘./logo.svg’
<img src = { logo } />learn 4:
JSX에서 style 속성 집어넣을 때 중괄호 안에 object 형식으로 넣어야 함.
style={ object 자료형으로 만든 스타일 }
예를들어서
< div style={{ color : ‘blue’, fontSize : ’30px’ }}>여기는 텍스트</div>
=> camelCase로 씀.
learn 5:
Learn 2에서 데이터 바인딩을 변수로 했다면 (데이터 저장)
이번에는 state로 보관을 해보자.
리액트에서 데이터를 저장하는 방법 두 가지.
1. 변수에 넣거나
2. state에 넣거나(destructuring)
순서
App.js 상단에 다음코드 첨부.
import React, { useState } from ‘react';
useState(‘강남 마카롱 맛집’); [a, b]
실행했을때 두개의 데이터가 남음.
let [a,b] = useState(’강남 마카롱 맛집’);
var [a, b] = [10, 100];array, object에 있던 자료를 변수에 쉽게 담고 싶을때
let [subject, changeSubject] = useState('예쁜 루프탑 카페 추천')처럼 선언하고 { subject }처럼 실행하면 된다.
state는
1. 변수대신 쓰는 데이터 저장공간
2. useState()를 이용해서 만들어야 함.
3. 문자, 숫자, array, object 모두 저장가능
et [subject, changeSubject] = useState('예쁜 루프탑 카페 추천’, ’선릉 점심 추천 장소’)
{ subject[0] }
//'예쁜 루프탑 카페 추천'state에 데이터를 저장하는 이유는:
웹이 app처럼 동작하게 만들고 싶어서이다.
subject 같은 데이터는 수정시에 바뀔 수도 있는데, cra는 이를 자동으로 재렌더링을 시켜준다. 그냥 변수는 변경되어도 자동 재렌더링이 되지 않지만, state는 새로고침 없이도 자동으로 제랜더링이 되는게 가장 큰 특징이다.
=> 즉, smooth하게 동작하는 사이트가 가능하다.
앞으로 모든걸 다 state로 만들어서 저장하면 되겠네요!🙆♀️
수시로 바뀌지 않는(거의 바뀌지 않는)것들은 하드코딩해도 상관은 없지만, 자주 바뀌고 중요한 데이터는 변수말고 state로 저장해서 쓰세요.
