[React] React State & Props-2

7.React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.
8.JSX 문법의 기본과 컴포넌트 기반 개발에 대해서 숙지한다.
9.React Router DOM으로 React에서 SPA(Single-Page Application)을 구현할 수 있다.
10.state hook을 이용하여, 컴포넌트에서 데이터를 변화시킬 수 있다.
11.props를 이용하여, 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 수 있다.
12.바람직한 컴포넌트 구조와 state와 props의 위치에 대해 고민한다.

7.리액트는 하향식 데이터 흐름을 가지고 있는데 이로 인해서 둘 이상의 컴포넌트에 영향을 주는 state의 위치는 해당 컴포넌트의 공통된 선조 컴포넌트(둘 모두를 후손으로 두는 컴포넌트)여야 한다. 데이터가 한 방향만으로 흐르기 때문에 어디에서 문제가 발생했는지, 그 문제의 여파는 어디까지인지를 파악하기도 쉬울 것 같다. 

8.JSX문법은 엘리먼트 작성시 태그로 감싸줘야하며 class가 아닌 className으로 사용해야한다.
JS기능들을 사용하기 위해서는 {}로 감싸줘야하고 if문보다는 ? :을 이용한 삼항연산자를 사용하며 map을 사용할 경우 key값을 넣어줘야 하는데 이 부분에서 랜덤으로 넣게되면 과부하가 걸릴 수 있기 때문에 랜덤은 지향하고 숫자값을 넣어줘야 하지만 삭제를 염두에 둔다면 key값을 만들어주는 라이브러리를 사용해야한다. 그리고 컴포넌트는 대문자로 시작해야한다.

9.SPA를 위해서는 npm install react-router-dom@^6을 사용해 라이브러리를 받아준 후 import로 { BrowserRouter, Routes, Route} from 'react-router-dom'; 등을 작성해 주고 내용물을 <BrowserRouter>로 감싸주고  <Routes>로 분기를 설정한 후 내부 내용을 <Route path="/" element={<Tweets />} /> (import Tweets from './Pages/Tweets';등으로 수입해줘야한다.) 주소, 페이지위치등을 지정해주면 그 페이지로 이동하는 분기점? 경로?가 생긴다. 

10.아래와 같이 useState를 import한 후 함수 내부에서 useState를 사용해 state로 선언하고 그 내부 값은 set변수명을 사용해 내부 값을 변경해야 하며 내부 이벤트핸들러를 사용해 set기능으로 state를 변경해준다.
import React, { useState } from "react";

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

11.아래와 같이 itemOne, itemTwo를 props로 넘겨주고 싶은 경우 부모컴포넌트에서 넘겨줄 자식컴포넌트의 내부에 anyname = {itemOne}의 방식으로 넣어준 다음 자식 컴포넌트에서 props.anyname을 통해 받아올 수 있다. 아래의 경우에는 a, b가 이름이다.
const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      <Learn a = {itemOne} b ={itemTwo}/>
    </div>
  );
};

const Learn = (props) => {
  return <div className="Learn"> {props.a} {props.b} </div>;
};


12.바람직한 컴포넌트의 구조에 대해서는 아직 뒤에서 배울 상태 끌어올리기 등을 제대로 배우지 않아 부족하지만 변화되는 것들을 모두 포함하는 가장 작은 규모의 컴포넌트(가장 낮은 부모단계?)에 위치시켜야 한다는 것 까지밖에는 모르겠다.

13.아래는 어드밴스 내용 중 셀럭터에 대해 잊어버릴까바 추가하는 내용
```js state를 추가해서 필터로 메뉴를 확인하는 부분을 만들어야 한다.
1. [isFiltered, set] = useState(false)
2. [filteredTweets, set] = useState(dummyTweets) 
<select>
<option> -- click to filter balabla -- </option>
{
</select> ```

오늘은 state&props-2를 끝냈지만 사실 state와 props에 대한 부분은 리액트에서 전반적으로 더 다룰 것 같다. 그 예로 다음주에 진행될 Unit9 - [React] 클라이언트 Ajax 요청도 state끌어올리기에 대한 이야기로 시작된다. 
조금 뒤쳐지는게 아닌가 싶었던 생각도 들지만 베어미니멈은 빨리 끝내고 어드밴스드도 조금씩 보는 정도로 만족하면서 부족했던 JS, 코딩테스트등을 보충해야겠다.