사용교재 : 벨로퍼트와 함께하는 모던 리액트
범위 : 1.1 ~ 1.9

1.1~9

백본, 앵귤러 : JS이벤트와 DOM 연결 → 업데이트 작업 간소화

리액트: JS이벤트 → DOM 교체 (업뎃x)
(?) DOM 리렌더링 속도저하 이슈
→ 가상 DOM : JS객체. 실제 브라우저 DOM보다 빠름. 업뎃이 필요한 부분을 가상DOM화. 변경사항 갈아끼움.

(?) yarn vs npm
npm : node.js의 기본 패키지 매니저
yarn: npm 개선. 더 나은 속도 & 캐싱 시스템

• 패키지 설치속도 빠름 : yarn 병렬, npm 순차 설치
• 종속성 : 자동으로 lock파일 생성. lock파일 없으면 패키지는 최신버전으로 설치된다.
  (출처 : https://developer0809.tistory.com/128)

(?) git bash

cmd로는 오류가 나기도 한다. bash는 shell이라 리눅스기반 명령어도 사용가능하다. 잘 모르겠다...

ReactDOM.render from "react-dom"

브라우저의 실제 DOM 내부에 리액트 컴포넌트 렌더링

JSX

리액트 컴포넌트 내에서의 XML형식
HTML을 닮았지만, 실제로는 JS
바벨이 JSX → JS 변환

1. 태그 반드시 닫기 *셀프 클로징: 태그 사이에 내용이 없을 때.
2. 최상위 태그는 반드시 하나
   *Fragment: 빈 태그, <> </>
3. JS 사용하기
   { 중괄호 } : JS 변수, 문법을 사용할 때는 중괄호 이용
4. style, className
   style: { 객체 } 로 입력, 속성은 카멜케이스로
   className: 클래스 지정은 className
5. 주석
   { /* */ } : 중괄호 필수
   // : 열리는 태그 내부에서 사용가능

Props와 컴포넌트

전달할 컴포넌트의 파라미터를 통해 전달

//App.js
return <Hello name="react" color="red" />;
//Hello.js
function Hello(props) {
  console.log(props); //{name: "react", color:"red"}
}

• defaultProps
  컴포넌트 props에 값이 전달되지 않았을 때, 사용될 디폴트값 설정

Hello.defaultProps = {
  user: "이름없음",
};

• children
  컴포넌트 태그 사이에 넣은 컴포넌트를 조회할 때 사용

// App.js
function App() {
	return (
		<Wrapper>
			<Hello /> // children
		<Wrapper/>
	)
}

// Wrapper.js
function Wrapper({ children }) {
  return <div>{children}</div>;
}

조건부 렌더링

&& 연산자
{ isTrue && <div>SHOW</div> }
선행 조건이 참일 때, 이후 연산 할당

• 반대: ||
  선행 조건이 거짓일때, 이후 연산 할당

-"단축 평가 논리 계산법"

열린 태그의 props값 지정을 생략
→ true로 자동 할당
<Hello isTrue={ true } /> === <Hello isTrue />

useState from "react"

변화하는 값 관리, 리액트 hooks 중 하나

const [state, setState] = useState("초기값");
//state: 현재 값
//setState: state를 변화시키는 함수

input 상태관리

function InputSample() {
  const [text, setText] = useState("");
  const onChange = (e) => {
    setText(e.target.value);
  };
  // e.target은 이벤트가 발생한 DOM인, inputDOM을 가리킴
  return (
    <div>
      <input onChange={onChange} value={text} />
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

다수의 input 상태 관리

useState, onChange 등 함수를 여러개 만들어 쓰기
→ 작동은 하지만 최선은 아님.
→ useState 상태를 객체로 만들어서 상태관리
→ onChange useState에서 선언한 객체값을 활용하여 범용성 있게 구현

리액트에서 객체 수정 방법

//직접 수정 절대 안됨!!
inputs[name] = "TOM";

// 변경 사항이 반영된 객체를 새로 만들어서 사용
setInput({
  ...inputs,
  name: "TOM",
});

→ 불변성을 지키기 위해
→ 리액트 컴포넌트에서 상태변화를 감지가능
→ 직접 수정은 상태변화 감지불가 +컴포넌트 업데이트 성능 최적화 가능