교육 | 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 6주차

국민내일배움카드로 국비지원받고 프론트엔드 학습
열공 챌린지 6주차

 

🎥 목차

1. 목표

2. 알게된 점

3. 좋았던 점

4. 아쉬운 점

 

 

🚀 목표

패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 6주차 학습강의 듣기가 학습 목표이다.

 

 

💡 알게된 점

Javascript vs React : 리렌더링

Javascript는 리렌더링이 Element 단위로 진행된다.

반면에, React는 리렌더링이 변경되는 부분만 진행된다.

 

이 차이로 인해, React의 성능이 더 빠르다.

 

React : 재조정

기존의 바닐라 자바스크립트는 Element 타입이 다르면, 이전 Element를 버리고 새로운 Element를 그린다.

 

React의 경우에는, Element 타입을 비교하고 Element의 key를 비교했을때 같다면, props를 비교하여 변경한다.

 

즉, React가 웹 성능에 조금 더 최적화되게 만들 수 있다.

 

자세한 내용은, React 공식문서를 참고하면 알 수 있다.

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

useState : lazy initialize

useState() 초기값을  늦춰서 주기위해서는, 함수를 넣으면 된다.

 

Custom Hooks 만들기

반복되는 컴포넌트가 있다면, Custom Hooks를 만들어서 해당 코드를 실행시킬 수 있다.

 

마치 반복되는 코드를 함수로 감싸서 코드양을 줄이는 것 처럼, 반복되는 함수를 Custom Hooks로 감싸서 코드양을 줄인다.

 

React : flow

초기 렌더

const App ▶ App - return 사이(변수 또는 함수 정의 : useState)  ▶ return  ▶ useEffect

 

리렌더

const App ▶ return (변경된 내용)  ▶ useEffect

useEffect cleanup 함수 호출

const App ▶ return (변경된 내용)  ▶ useEffect Cleanup ▶ useEffect

부모 useEffect의 cleanup함수가 실행되고, 자식 useEffect가 시작된다.

 

console.log vs console.dir

console.log(document)

console.log는 html tree 형태로 보여준다.

 

console.dir(document)

console.dir은 JSON 형태로 보여준다.

 

form

form 태그안에 input 태그값을 얻기위해서는 event.target.elements.[input태그의 id값].value을 입력하면 얻을 수 있다.

const handleSubmit = (event) => {
    console.log(event.target.elements.fname.value)	// Jhon
    console.log(event.target.elements.lname.value)    // Dong
}

return (
    <form onSubmit={handleSubmit}>
        <input id="fname" value="Jhon">
        <input id="lname" value="Dong">
    </form>
)

 

에러 다루기

강사님께서는 에러를 다루기 위해서는, class로 정의된 ErrorBoundary를 사용해야한다고 말씀하셨다.

getDerivedStateFromError()는 class에만 존재한다.

 

그러다 문득 든 생각은, 나는 try catch를 이용해서 에러를 다루었는데 굳이 ErrorBoundary는 무엇이 다를까 생각했다.

try {
    throw new Error('error 발생')
} catch (e) {
	console.log(e);
}

 

알고보니 에러가 1개라도 있으면 화면이 표시되지 않는데, ErrorBoundary는 에러가 발생한 경우 해당 컴포넌트를 제외한 나머지 컴포넌트는 화면이 표시되게 만들어 줄 수 있다는 장점이 있다.

 

ErrorBoundary 클래스는 다음과 같이 사용한다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: false };
  }

  static getDerivedStateFromError(error) {
    // getDerivedStateFromError는 에러를 감지한다.
    return { error: true };
  }

  render() {
  	const {error} = this.state;
    if (error) {
      // 곧바로 태그를 반환할 수 있다.
      return <h1>Something went wrong.</h1>;
      // 또는 fallback 컴포넌트로 출력하게 할 수 있다.
      return this.props.fallback
    }

    return this.props.children; 
  }
}

const Fallback = () => {
	return (
    	<div>
            <p>에러가 발생했습니다!</p>
        </div>
    )
}

const App = () => {
    return (
        <ErrorBoundary fallback={Fallback}>
            <div>에러가 발생하면, ErrorBoundary 컴포넌트가 실행된다. 없으면, 이 태그가 표시된다.</div>
        </ErrorBoundary>
    )
}

 

🙌 좋았던 점

리액트 팁

기존에 배웠던 리액트문법을 알려주시면서, 이벤트 호출 함수를 명명할때, handleClick과 같이 handle을 접두사로 붙이라고 말씀하신다.

 

이와같이 자잘한 팁을 알려주셔서 좋았다.

 

다만, 정말 집중해서 듣지않으면 바로 넘어가기때문에, 자세히 설명해주셨으면 하는 아쉬움도 있다.

 

🐧 아쉬운 점

강사님 교체

1~5주차 강의와 6주차 이후의 강의의 강사님이 다르다.

 

1~5주차 강사님께서 알려주지 않은 내용을 6주차 강사님께서 내가 아는듯이 넘어가는 모습이 조금 아쉬웠다.

 

특히, 1~5주차 강사님 주도하에 VSCode를 이용하여 오버워치 영웅 초상화, 스타벅스 클론코딩을 진행했는데

6주차 강사님은 cordsandbox라는 홈페이지를 통해 React를 알려주셔서, 괜히 더 헷갈렸다.

 

또한, 1~5주차 강사님은 설명하는 부분을 편집하면서, 말이 끊김없고 실수없이 착착 진행되었는데,

6주차 강사님은 편집없이 강의를 그대로 진행하셔서, 처음에 적응이 안되었다.

 

기존에 패스트캠퍼스 강의 리뷰를 보게되면, 알려주시는 강사님이 바뀌시고 말하는 내용이 다 달라서 강의를 추천하지 않는다고 했었다.

왜 사람들이 강사님이 바뀌고 나서 말이 많았는지 이번 주차 강의를 듣고 나서 해당 리뷰를 이해할 수 있었다.

 

물론 React 강의 내용은 내가 몰랐던 옛날에 사용했던 React를 설명해 주셔서 좋았다.

그러나, 강사님이 바뀐것에 따라 강의내용도 바뀌었기때문에 적응하는데 시간이 조금 필요했다.

 

자세한 설명이 필요해요!

강사님이 리액트를 설명하시다가 이건 몰라도 되고요, 나중에 MDN에 검색해서 찾아보세요 등 설명을 잘 안해주시는 경우도 있다.

 

물론 중간에 강사님께서 몰라도 된다고 말하는 내용은 정말 몰라도 된다는 내용이라고 말씀하신다.

 

그래도 조금 설명이 필요하지 않나 싶다.

 

왜냐하면, 작년에 타 국비지원 강의를 들을때 그때 강사님이 몰라도되요~ 그냥 그렇다고 하고 넘어가세요~ 라고 말씀하셨던게 떠올랐다.

당시에 강사님 말만 믿고 그냥 넘어갔다가, 나중에 코드를 작성하는 구간에서 전부다 까먹어서 혼자서 고생했던 기억이 떠올랐기 때문이다.