구현하는 기능과 배우는 컨셉
✔ 블로그 navbar 예제를 통해 style속성 적용
✔ useState 실습예제 적용해보기
✔ ES6 destructuring 문법 적용해보기
블로그 navbar
◾ 태그에 class를 주고싶으면 className으로 사용한다
◾ src, id, href등의 속성에서도 변수,함수 넣을수있음
블로그 글 리스트 UI만들기
◾ Data를 보관할 때, 2가지 방법이 있는데 변수와 state를 사용하는 것이다.
◾ import React, {useState} from 'react' 작성
=> 리액트의 내장함수를 하나 사용함
◾ useState 함수 만들기
◾ useState()라는 함수는 state를 하나 만들어주는 함수이다.
◾ [데이터1, 데이터2] 이걸 각각 변수명으로 ES6 destructuring 문법을 이용해 저장해서 사용한다.
◾ a라는 변수엔 실제 저장할 데이터가 들어있다
◾ b라는 변수엔 저장할 데이터를 변경시킬 함수가 들어있다.
◾ let [글제목, 글제목변경] = useState('남자 바지 추천')에서 글제목이라는 변수에 '남자 바지 추천'이라는 데이터가 들어간다
◾ 글제목변경 변수는 '남자 바지 추천'이라는 데이터 변경을 도와주는 함수가 들어있다.
◾ state 데이터도 똑같이 변수처럼 데이터바인딩이 가능하다.
◾ posts라는 변수와, state 의 data를 각각 <h3>에 넣어 사용했다.
◾ state에는 Array, Object 자료형으로 넣어도 사용할수 있다.
state에 데이터 저장을 하는이유
◾ 변수가 변경될 때 자동으로 관련된 HTML을 재랜더링되게 만들어준다.
◾ 리액트는 state가 수정이 일어나면 state가 포함된 HTML을 자동으로 랜더링해준다. 즉, 새로고침없이 랜더링이되어 스무스하게 동작된다.
◾ 자주 바뀌는, 중요한 데이터는 변수마고 state로 저장해서 사용
◾ blog제목같이 수시로 변경하지않은 것들은 일반 변수로 사용해도 무방하다.
destructuring 이란?
// 문법적용x
let array = ['Kim', 10];
let name = array[0];
let age = array[1];
// destructuring 문법적용
let [name, age] =['Kim', 20];
['Kim', 10]이라는 array 자료형에서 Kim이랑 10이라는 자료를 각각 변수에 저장하려면 번거러웠다.
destructuring문법을 사용하면, 각각 name ="Kim", age=20 이라는 변수가 생성된다.
