부트캠프 10Week

- 220606 ~ 220607

드디어 2주간 프로젝트를 마치고 리액트 수업을 시작했다. 프로젝트 회고도 조만간 작성할 예정이다. 리액트는 이번이 처음 접하는 건데 왜 요즘 강세인지 바로 알 것 같다. 아직 헷갈리긴 하지만 jsx 문법이 너무 편리한 거 같다. 코드를 재사용할 수 있다는 점이 너무 강점으로 느껴지기도 한다.

• 리액트 온라인 코드 편집기 : Stackblitz
• 리액트 로컬 환결 설정 : npx create-react-app@latest .
• 리액트 실행 : npm run start
  
• 리액트는 사용자 정의 태그를 만드는 기술이다.
• 사용자 정의 태그를 리액트에서는 컴포넌트라고 부른다.
• 컴포넌트를 부품으로 조립해서 완제품을 만드는 것이 리액트를 이용한 개발이다.
• 컴포넌트의 이름은 반드시 대문자로 시작해야한다. ex) Header()
• 컴포넌트의 return 값은 반드시 최상위가 하나의 태그로 감싸져야한다.
• jsx : 자바스크립트의 확장 문법
  ①반드시 하나의 부모 요소가 감싸는 형태여야 한다.
  ②HTML 내에 자바스크립트 표현식을 작성하려면 {}로 감싼다.
  ③클래스는 class가 아닌 className으로 작성한다.
  ④스타일은 string이 아닌 object로 작성한다.
  ⑤태그는 무조건 닫혀야 한다.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

• 리액트에서 목록을 만들 때는 유니크한 키 값을 준다.

<li key={e.id}><a href={'/read/'+e.id}>{e.title}</a></li>

• 렌더링 하기 ReactDOM.render()
• 리액트는 html처럼 매번 전체를 다시 렌더하는 것이 아닌 변경된 부분만 업데이트 한다.
• 컴포넌트에 속성(props) 사용하기

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
const element = <Welcome name="Sara" />;  // Hello, Sara!
ReactDOM.render(element, document.getElementById('root'));

① <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출
② React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출
③ Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환
④ React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

• props는 읽기 전용이다. 컴포넌트의 props를 다른 값으로 수정하면 안 된다.
• gh-pages 이용해서 깃헙 페이지 만들기
  - git remote add origin
  - git push -u origin master
  - npm run build
  - package.json 파일에 "homepage" : "깃헙페이지주소" 추가
  - npx gh-pages -d build
  - 깃헙 pages 소스 브랜치를 gh-pages로 설정

- 220608 ~ 220609

props와 state, 이벤트에 대해서 배웠다. 리액트 첫 수업 때 살짝 보고 넘어가긴 했지만, 제대로 이해되지 않은 감이 있었다. 하지만 이번에 실습 문제가 엄청 많이 제공 돼서 계속 반복해서 작성해보니 익숙해지고 제대로 이해가 된 것 같다. 리액트는 자바스크립트와 비슷하면서도 작성법이 조금씩 달라서 헷갈리지 않게 조심해야할 것 같다. 그리고 useEffect에 대해서도 미리 예습을 했는 데, 약간 이벤트가 버블링되는 느낌 같았다.

• mui 툴 써보기 npm install @mui/material @emotion/react @emotion/styled
• 이벤트 넣기 onClick

function App() {
  return (
    <div>
     <Header onSelect={() => {  // onSelect는 props
       alert('Header!!!');      // Header!!!를 출력하는 이벤트
     }}></Header>
   </div>
  );
}
function Header(props) {
  return <header><h1><a href="/" onClick={(evt) => {  // 클릭 이벤트 인자로 evt
    evt.preventDefault();  // evt에 preventDefault 적용
    props.onSelect(); 	   // props로 전달된 onSelect 호출
  }}>Web</a></h1></header>
}

• 앞에 use가 붙는 함수를 Hook이라 부른다. ex)useState
• Hook은 특별한 함수, import해서 사용
• Hook은 반드시 최상위에서 호출되어야 하며, 오직 리액트 함수에서만 호출 되어야 함
  if문, for문 안에서 훅 사용 x, 일반 자바스크립트 함수에서 사용 x
• useState : state를 가지는 대상과 그 대상의 state를 변화시키는 함수를 생성
• const [state 변수, state 변수를 갱신하는 함수] -> 배열로 집어넣음

const [count, setCount] = useState(0);
// count는 state 변수, setCount는 count 갱신 함수, useState는 초기 값 설정
setCounter(counter => counter + 1)
// counter 변경할 때는 setCount 함수를 호출하여 변경
// 전에 있던 counter를 받고 그 counter에 1 증가

• 리액트에서는 state값이 바뀔 때만 업데이트된다.
• useEffect : 특정 부분(state)이 바뀔 때마다 부수적으로 다른 부분도 함께 변화되는 효과
• useEffect는 모든 state에 반응하기 때문에 state가 여러 개일 경우에는 두번째 인수에 배열로 명시하여 어떤 state에 반응하는지를 특정시켜줄 수 있다. state 여러 개에 적용 가능
  useEffect(() => {}, [반응할 state, 반응할 state...]);
• 처음 렌더링할 때만 실행하고, 이후로는 절대 실행하지 않게 하려면 빈배열로 남김
  useEffect(() => {}, []);

useEffect(() => {
  document.title = `You clicked ${count} times`;
});
// counter state에만 effect 적용
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [counter]);
// 처음 렌더링할 때만 실행
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

- 220610

Hook에 대해서 배우고 작은 프로젝트에 적용해보는 실습을 했다. 간단한 코드를 작성할 땐 어려움이 없었는 데, 코드가 길어지니 점점 복잡해지는 거 같다. 기존의 훅 외에도 커스텀 훅도 만들어서 사용할 수 있다는 데 이 부분은 아직 더 공부해야할 것 같다.

• Hooks는 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용
• Hooks가 도입됨으로써 함수형 컴포넌트에서도 상태 관리를 할 수 있게 됨.
• Hook명은 use로 시작하며 React 함수내에서만 사용이 가능
• 최상위 레벨에서만 Hook을 호출할 수 있음
  
  
• useState는 컴포넌트 내의 동적인 데이터를 관리
• state는 읽기 전용이기 때문에 state값을 변경하려면 setState 함수를 이용해야 함.
• state가 변경되면 자동으로 컴포넌트가 재 렌더링
• const [state, setState] = useState(defaultValue)
  
  
• useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있음
• useEffect는 컴포넌트가 최초로 렌더링될 때 실행. 즉, 무조건 한 번씩은 실행됨
• 감지 대상을 지정해주지 않으면 발생하는 모든 변화에 반응함
• 감지 대상은 여러 개 지정 가능 [감지 대상1, 감지 대상2, ...]
• 최초 렌더링 시에만 실행하도록 하고 싶다면 감지 대상에 [빈배열]을 넘겨주면 됨
• useEffect(callback fn, deps)
  
  
• useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있음
• useMemo(callback fn, deps)
  
  
• useCallback는 함수를 메모이제이션하기 위해 사용 (useMemo와 비슷)
• useCallback(callback fn, deps)
  
  
• useRef는 컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환함
• ref 객체는 .current라는 프로퍼티를 가지며, ref 객체가 변경되어도 컴포넌트가 재렌더링되지 않음
• useRef(initialValue)