[9주차] 3. 리액트 입문(3)

리액트 입문

class 형 컴포넌트

• 기존 컴포넌트는 함수형으로 만들었었다. 클래스 컴포넌트는 또 하나의 컴포넌트 선언방식
• 클래스 컴포넌트는 요즘 자주 사용하지는 않음
• 클래스 컴포넌트 유지 보수 하거나 함수형 컴포넌트로 해결하지 못하는 부분이 두개 정도 있기 때문에 익히기
• 앞으로 컴포넌트는 함수형으로 만드는 것이 좋고 클래스 컴포넌트는 꼭 필요할 때 혹은 옛날 컴포넌트를 유지 보수 하는 경우에만 사용
• hooks라는 게 생기면서 클래스 컴포넌트는 뒷전이 됨

만드는 방법

• 상단에 Component 불러오기 : import React, {Component} from ‘react’;
• class 키워드로 컴포넌트 만들기 : class 컴포넌트이름 extends Component { }
• class 형 컴포넌트는 render라는 method 필수이며 그 method 안에서 jsx 반환 
• class 컴포넌트이름 extends Component { render(){ return ( jsx문법 ); } }

• defaultProps 설정
  • 클래스 컴포넌트 밖에서 컴포넌트이름.defaultProps = { }; 선언
  • 클래스 컴포넌트 안에서 render method 전에 static defaultProps = { }; 선언

state 와 setState

• 값을 바꾸기 위해 state 사용해야 함
• custom method : 클래스 내부에 함수 선언, 마음대로 이름 지정 가능
  • render 전에 선언
  • 함수이름() {실행할 부분}
• render method : Component 가 자체적으로 지니고 있는 method
• 만든 함수를 특정 이벤트로 등록하는 과정에서 각 함수와 컴포넌트 인스턴스와의 관계가 끊겨버리는 문제 해결해야 함
• 만든 함수를 특정 이벤트와 연결하는 순간 함수와 this와의 연결이 사라져 버림, 함수가 실행된 순간 this가 무엇인지 모르게 됨(this가 있어야 할 자리에 undefineded 나타남)
• 해결 방법
  • 1. 가장 일반적인 방법 : 컴포넌트 생성자 함수 constructor에서 함수를 미리 bind(constructor 안에서 함수가 this를 가리키게 된다면 bind 괄호 안을 가리키게 하라는 뜻)해주기 
    2. constructor(props) { super(props); 하고 싶은 작업 작성(bind 작업(this.함수이름=this.함수이름.bind(this); 등) }
  2. custom method 선언 시 화살표 함수를 사용해서 작성(babel plug인 class properties 문법)
     함수이름=()=>{
     함수 내용
     }

상태 관리

• this.setState에 업데이트 하고 싶은 값만 넣어주면 state의 해당 값만 업데이트하고 나머지 값은 건들지 않는다.
• state 안에 들어있는 객체가 또다른 객체를 포함할 때 그 또다른 객체를 바꾸고 싶을 경우 state 객체 안에서 바꾸고 싶은 객체를 제외한 모든 객체들을 setState에서 다 작성 해줘야 한다.(spread 연산자 활용)
• this.setState = ({ state객체 : { …this.state.state객체, state객체안객체 : this.state.state객체.state객체안객체 활용 } })
• state 선언 없이 setState 바로 사용 가능
  함수이름 = () => {
  this.setState(state => ({}))
  }
  • setState함수는 단순히 상태를 바꾸는 함수가 아니라 설정해준 상태로 바꿔달라고 요청하는 함수라고 이해하면 됨, 그래서 바로 상태가 업데이트 되지 않음. 한 함수 내에서 여러 번 setState를 쓸 일 이 있다면 setState를 함수형 업데이트를 해줘야 제대로 업데이트 됨
• 객체 : this.state.객체 활용

this 이용

• constructor 안에서 this.state = {해당 컴포넌트에서 사용할 초기값 작성}; 로 특정 객체 설정하면 중괄호 안에 있는 것이 그 컴포넌트의 상태가 됨. 그 상태를 조회하고 싶을 땐 this.state.초기값설정한객체이름
• 상태를 바꿀 함수 안에서 this.setState({초기값을 줬던 객체이름 : this.state.객체이름 활용해서 업데이트 하고 싶은 상태});
• state는 무조건 객체 형태여야 함. 배열, 문자열 등 입력시 오류

바로 state 사용(babel plug인 class properties 문법)

• state = { 초기값객체 설정 };
• 정식 자바스크립트 문법 아님

LifeCycle 메서드

• 생명주기 메서드
• 컴포넌트가 브라우저 상에 나타나고 업데이트되고 사라지게 될 때 호출되는 메서드들
• 컴포넌트에서 에러가 났을 때 호출되는 메서드들 또한 LifeCycle 메서드 중 일부
• 클래스형 컴포넌트에서 볼 수 있음
• 함수형에는 useEffect가 있고 클래스형에는 LifeCycle 메서드들이 있다
• React DOM 및 refs 업데이트 : 실제 브라우저에 변화 발생
• 함수형 컴포넌트에서도 할 수 있는 메서드 : componentDidMount, componentDidUpdate, componentWillUnmount
• getSnapshotBeforeUpdate 메서드, componentDidCatch 메서드는 클래스형 컴포넌트에서만 가능

컴포넌트가 생성(Mount)될 때(브라우저 상에 보일 때)

• 1. 생성자 함수 constructor : 컴포넌트가 가장 처음 만들어질 때 호출되는 함수
  • super(props) 해야 하는 이유 : react component class가 지니고 있는 constructor이 있어서 그걸 덮어씌우기 위해서 react component class가 지니고 있는 constructor 호출하는 것
  • this.state 혹은 bind 작업
  2. getDerivedStateFromProps : props로 받아온 것을 state 안으로 넣어야 할 때 사용
  • 다음 받아올 props, 현재 컴포넌트가 지니고 있는 상태를 인자로 받음
  • props로 받아온 어떠한 값을 state로 동기화 시켜주는 역할
  • 이것은 사용할 일이 별로 없고 이것 대신에 componentDidMount 사용 가능
  4. render : class형 컴포넌트에서 render 쪽에서 뭘 보여주고 싶은지 jsx 형태로 정의해서 반환
  7. componentDidMount : 이것이 발생하는 시점에서는 브라우저에 우리가 원하는 컴포넌트가 보여져 있는 상태이므로 해당 상태에서 DOM에 직접 접근 가능 또는 외부 라이브러리 사용 가능
  • 어떤 외부 api에 호출 가능
  • 특정 DOM에 이벤트 설정 가능

컴포넌트가 업데이트 될 때(리렌더링 될 때)

• 리렌더링 되는 경우 : 부모 컴포넌트 리렌더링 됐을 때, 자신의 props가 바뀌었을 때, 자신의 상태가 바뀌었을 때, class형 컴포넌트에서 this.forceUpdate() 호출시 강제 렌더링
  2. getDerivedStateFromProps : props로 받아온 것을 state 안으로 넣어야 할 때 사용
  • 컴포넌트가 마운트 될 때, 컴포넌트가 업데이트 될 때 호출
  3. shouldComponentUpdate : 컴포넌트를 최적화해야하는 단계에서 사용, 리렌더링이 불필요한 시점에서 리렌더링 방지 가능, true 반환시 render, 하지만 false 반환시 render 멈춤(기존을 보여줌)
  • 최적화 하는 용도
  • false 반환시 리렌더링 하지 않고 true 시 리렌더링(특정 조건에서는 리렌더링하지 않음)
  4. render : class형 컴포넌트에서 render 쪽에서 뭘 보여주고 싶은지 jsx 형태로 정의해서 반환
  5. getSnapshotBeforeUpdate : 브라우저 변화 일으키기 직전 호출되는 메서드
  • 컴포넌트가 리렌더링되고나서 브라우저에 변화를 일으키기 바로 직전에 DOM에 접근 가능
  • 어떤 값을 return하게 되면 그 다음 보여질 componentDidUpdate 세번째 인수에서 조회 가능
  7. componentDidUpdate
  • 이전에 자신이 들고있던 props 정보, 이전에 지니고 있던 상태, getSnapshotBeforeUpdated에서 반환한 값(딱히 없으면 조회하는 값이 없음)을 인수로 가짐

컴포넌트 제거 할 때(언마운트)

• componentWillUnmount : componentDidMount에서 어떤 이벤트를 등록했을 때 컴포넌트가 사라질 때 이벤트 지워주는 등의 작업
  • 컴포넌트가 사라지기 바로 직전 호출되는 메서드
  • 등록된 이벤트 제거하거나 setTimeout 취소하는 등의 작업

componentDidCatch 메서드

• 에러가 발생한 상황에 이 메서드가 먼저 호출됨
• 컴포넌트가 에러 났을 때 에러를 잡아주는(처리) 역할
• 함수형 컴포넌트에서는 사용 불가능
• 실수로 인해 에러 발생시 흰 화면이 아닌 에러가 발생했다는 문구가 발생하게 하는 등의 작업을 해줌
• 사용자에게 에러가 발생했음을 알리고 모니터링 가능하게 해주는 역할
• 아직 발견하지 못한 에러가 발생했을 때 사용자에게 에러가 발생했음을 알려주는 역할
• 클래스 컴포넌트로 error 날 경우 조치할 내용 만들기 예시
  

  class 컴포넌트이름 extends Component {
   render(){ 
  	return (
  	jsx문법
  	);
   }
  }​

• render() {
• 에러 발생시 나올 내용; this.setState({})
• state = { error : false };
• 인자 parameter
  • error: error에 대한 정보
  • info : error가 어디서 발생했는지에 대한 정보
• App js에서사용
  <error발생컴포넌트>
  <적용시킬 컴포넌트 />
  </ error발생컴포넌트>

componentDidCatch 메서드와 sentry 연동

• sentry : https://sentry.io/
• 받아온 error와 info를 특정 에러 관리 서버(sentry)에 넘겨주게 되면 실시간으로 에러를 확인할 수 있다.
  1. yarn add @sentry/react @sentry/tracing 를 git bash나 터미널에 입력해서 설치
  2. import * as Sentry from "@sentry/react"; 를 index.js 상단에 작성

  3. Sentry.init({
     dsn: "https://5e13d3552a654c8ba9f7a24e6cc6f068@o1031526.ingest.sentry.io/5998288",
     integrations: [new Integrations.BrowserTracing()],
     

• tracesSampleRate: 1.0,
  });
• index.js에 작성
  4. 위 코드들 다 작성 후 sentry 사이트에서 take me to my event 버튼 클릭 시 에러가 어떤 에러가 발생했는지 어디서 발생한 것인지 등 을 볼 수 있다.
  5. componentDidCatch(error,info)가 작성된 에러발생시 나타날 컴포넌트 파일 상단에
     import * as Sentry from "@sentry/react"; 작성
  6. componentDidCatch(error,info) 중괄호 안에 아래 코드 추가(production에서도 작동 가능하게)

     if (process.enc.NODE_ENV === ‘production’) {
     Sentry.captureException(error, {extra: info} );
     }

  7. yarn build를 git bash나 터미널에 입력해서 build라는 directory 생성(프로젝트 완성본이 들어가게 됨)
  8. npx serve ./build 를 git bash나 터미널에 입력해서 해당 build directory를 가지고 웹서버 localhost로 열기

리액트 개발시 편하게 해주는 도구

Prettier

• 자동으로 코드의 스타일을 관리해주는 토구
• 문자열 사용시 작은 따옴표 쓸지 큰 따옴표 쓸지
• 코드에 세미콜론 붙일지 말지
• 들여쓰기 어떻게 할지
• customizing 가능
• 명령어를 사용해 쓰면 모든 코드가 prettier로 설정한 코드 스타일로 설정 가능
• link-staged : git에서 파일 commit 전 미리 정리해주는 것
• 적용 방법
• 수동 적용: VS Code 적용시킬 파일 > F1 > format document > .prettierrc에 작성한 설정에 따라 자동 정리됨
• 저장시 자동 적용 : VS Code 파일 메뉴 > 기본 설정 > 설정 > 설정 검색창에 format on save > 파일 저장시 서식 지정 체크박스 체크 > 저장시 자동 정리VS code 사용하는 경우
  1. code 해당 디렉토리 경로를 git bash나 터미널에 작성 : 쓰고자 하는 해당 디렉토리를 에디터(vs code 등) 열어줌
  2. vs code 확장 icon에서 prettier 검색 후 다운로드
  3. 해당 디렉토리 내에 파일 .prettierrc(이 파일에서 prettier에서 사용할 설정 넣어줌) 생성

.prettierrc

• 설정들은 중괄호 안에 작성하고 쉼표로 구분
• 홈페이지 참조해서 원하는 설정 작성
• “trailingComma” :
• 객체나 배열 선언시 뒤에다가 쉼표 남겨두는 옵션
• 강사님의 경우 : all
• “none” 은 안쓰는 것
• “es5”는 es5에서 지원하는 정도로 다 넣겠다는 의미
• “tabWidth” :
  • 들여쓰기 몇칸이나 할 지 정하는 것
• 강사님의 경우 : 2
  • 기본은 4
• “semi” :
  • 강사님의 경우 : true
  • 세미콜론 쓸지 말지 정하는 것
  • true or false
• “singleQuote” :
  • 강사님의 경우 : true
  • 매번 작은따옴표 사용할 것인지 여부
  • true or false

ESLint

• 자바스크립트 문법 검사해주는 코드
• 기본적인 자바스크립트 문법을 검사해주는 것을 떠나서 다양한 커스텀 규칙들을 설정해 줄 수 있다.
• prettier의 경우 코드 모양새를 신경쓰고 자동으로 고치는 것에 중점되어 있다면 ESLint의 경우 prettier에서 커버하는 코드 스타일을 포함해서 다양한 옵션들이 존재
• 렌치 모양이 있는 것들은 ESLint 코드를 통해서 바로 고칠 수 있는 것들 이다.
• 일부 규칙은 자동으로 고쳐줄 수도 있고 일부 규칙은 수동으로 고쳐야 함

사용시 장점

• 노란 줄 쳐진 곳에 커서 올리면 빠른 수정 누르면 fix- 라는 메뉴 뜨는 데 그거 클릭 시 자동으로 고쳐짐
• 자동 고쳐지는 것을 저장할 때마다 고쳐지는 것으로 설정 가능 : 파일 > 기본 설정 > 설정> 설정 검색창에서 ESLint > ESLint : Auto Fix On Save 체크박스 체크
  혹은 그 메뉴 없을 때 https://minemanemo.tistory.com/98 참조

max-params

• 코드에 함수 작성 시 파라미터의 개수를 제한시키는 작업을 함
• 제한된 파라미터 개수 이상 작성시 에러 뜸

eqeqeq

• 키게 된다면 equal sign(=)을 두번만 한다면 에러 뜸

no-param-reassign

• 파라미터로 받아온 것을 다시 거기다가 변화를 주지 말라는 규칙
• 새로운 변수를 만들어서 변화를 주게 되면 에러 안뜸

no-lonely-if

• if else 안에 또 if 만들 경우 에러 발생
• else if 사용해서 작성하게 함

no-unused-vars

• 어떤 값을 선언해놓고 한번도 사용하지 않으면 그에 대하여 경고 띄워줌

semi

• 세미콜론을 쓸지 말지 결정
• “always” : 세미콜론 언제나 씀, “never” : 아예 안쓰기
• 어기게 되면 오류를 보여주게 끔 처리 가능

quotes

• “double” : doubleQuote 사용
• “single” : singleQuote 사용

camelCase

• 변수 선언시 camel case를 강제하게끔 설정

ESLint를 코드창에서 바로 보여주기

• VS Code 확장 메뉴에서 ESLint 설치
• 코드 창에서 ESLint 규칙에 안맞는 것들이 노란 줄로 줄치게 됨, 하단 문제 창에서도 볼 수 있음

ESLint 설정 커스터마이징

• 현재 ESLint 규칙은 package.json 코드 중 “eslintConfig” : { “extends” : “react-app” }
• react의 경우 eslint-config-airbnb가 많이 사용 됨(but 규칙 까다로우니 사용할지 말지는 개인 취향)
• eslint-config-airbnb 적용하고 싶을 경우
  1. git bash나 터미널에서 yarn add eslint-config-airbnb 작성해서 라이브러리 설치
  2. “eslintConfig” : { “extends” : [“react-app”, “airbnb”] } 작성해서 airbnb 규칙 추가
• prettier에서 관리하는 것들은 ESLint에서 자동으로 끄기
  1. git bash나 터미널에서 yarn add eslint-config-prettier 설치
  2. “eslintConfig” : { “extends” : [“react-app”, “airbnb”, “prettier”] }로 prettier 규칙을 뒷부분(중요에 추가
• 특정 규칙만 끄고 싶을 경우 rules 안 중괄호에 해당 규칙을 작성 후 값 설정( ex)경고 뜬 부분에 커서 올리면 eslint(규칙) 으로 어떤 규칙에서 경고 뜨는지 보여주는데 괄호 안 규칙 복사해서 rules 안에서 정의해주기)
• “eslintConfig” : { “extends” :[ “react-app”, “airbnb”, “prettier” ], “rules” : { “규칙” : 값 } }
• ESLint 아예 구동하고 싶지 않을 경우 : 해당 파일 최상단에 /* eslint-disable */ 작성 시 ESlint 비활성화 됨

Snippet(코드 조각)

• snippet generator.app
• 대부분 에디터에 내장되어 있는 기능
• 자주 사용되는 코드에 대하여 단축어 사용
• 확장 프로그램 보다 직접 만들어서 쓰는 것을 사용하는 것을 추천(개발 생산성 높아짐)
• 파일 이름을 참조하여 컴포넌트 생성 : 파일 이름 참조할 부분에 ${TM_FILENAME_BASE}을 대신 작성(파일 이름을 확장자 제외한 부분을 참조)
• 쉼표로 구분
• 내가 만든 단축어 = fc : 함수형 컴포넌트 생성, rcc : 클래스 컴포넌트 생성
• 자주 사용하는 코드를 snippet으로 만들어서 사용하면 코드 작성 속도가 빨라짐
• 필요하면 쓰기

적용 방법

• 1. snippet으로 만들 코드 복사
  2. snippet generator.app 주소로 이동 >왼쪽 코드창에 입력 > Description에는 그 코드 설명 작성 > Tab trigger에는 그 코드 사용할 단축어 작성 > 오른 쪽 창에 나온 코드 복사
  3. VS Code 오른 쪽 하단에 Javascript 클릭해서 Javascript React 쳐서 언어 변경(js 파일 열 때 마다 이 언어로 설정하고 싶을 시 .js 파일에 대한 연결 구성 클릭 후 Javascript React 설정)
  4. VS Code 파일 메뉴 기본 설정의 사용자 코드 조각에서 Javascript React 선택 > 중괄호 안에 복사한 코드 붙이기
• 단축어로 생성시 포커스 주고 싶은 부분에 ${숫자: 기본값}으로 설정
• 숫자는 포커싱 되는 순서 뜻함(tab 누를시 커서 순서대로 이동 됨)
• ${숫자}로 기본 값 작성 안할시 포커스만 되고 어떠한 값 안나타남
• ${}로 작성되어 있는 것도 ${}로 다시 한번 감싸면 포커싱 됨