[MGS 3기 - 18일차] React 심화

박철연·2022년 5월 4일
0

MGS STFE 3기

목록 보기
19/35

어제에 이어 오늘은 React 심화 개념에 다루어 보았습니다. 이재원 매니저님의 React 특강을 통해 기초 개념을 다시 복습하면서 진행했습니다.

이벤트 핸들링

이벤트 핸들링 in React

React에서의 이벤트 핸들링은 자바스크립트의 그것과 비슷합니다. HTML DOM에 특정 행동을 하면, 미리 설정해 놓은 이벤트가 발생하게끔 하는 것입니다.

그리고 그 이벤트가 발생하면, 그에 맞춰서 동적으로 웹 페이지가 변경되게 될 것입니다.

React 내에서 우리는 대부분의 코드를 jsx로 작성하기 때문에, jsx 내에서도 당연히 이벤트 핸들링을 할 수 있게 설계되어 있습니다.

전에 React의 특징 중 가상 DOM을 언급한 적이 있는데요, 이 가상 DOM은 React 내에서 이벤트를 관리할 때에도 중간에 위치합니다.

자세한 이벤트 핸들링 프로세스는 위 이미지를 참고해주세요.

이벤트 핸들링 예시

우리가 자바스크립트에서 이벤트 핸들링을 할 때에는, 두 가지 과정을 거쳤습니다.

먼저 자바스크립트로 이벤트 발생 시 적용될 코드를 입력하고,

다음으로는 해당 DOM을 찾아 그 이벤트를 프로퍼티로 추가해주는 것이었죠.

React에서의 이벤트 핸들링은 더 간단합니다.

class Comp extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => {
          console.log('clicked');
        }}>클릭</button>
      </div>
    );
  }
}

컴포넌트를 만드는 jsx 안에 button 요소를 하나 만들어 주었고, 그 button 요소의 프로퍼티로 onClick을 넣어 주었습니다.

이제 저 버튼은 클릭 되면 콘솔에 'clicked'라는 메시지를 계속해서 띄울 것입니다.

자바스크립트와 차이점은 onClick과 같이 이벤트 핸들 프로퍼티를 추가할 때 Camel Case로 작성한다는 것입니다.

(물론, VSC와 같은 IDE에서 대부분 자동완성을 제공하니 걱정하지 않으셔도 됩니다.)

이벤트 핸들링 시 유의점

일단 첫 번째는, 바로 위에서 언급한 것과 같이 camel case만 허용됩니다.

onclick이 아니라 onClick, onmouseenter가 아니라 onMouseEnter, 이런 식으로요.

본인이 사용하는 에디터가 자동완성을 지원한다면, 그냥 알아만 두고 넘어가시면 됩니다.

또한, 이벤트 핸들링은 항상 이벤트 = {함수}의 형식을 취합니다.

앞서 살펴 본 예시에도 onClick 다음에 화살표 함수로 콘솔에 메시지를 출력하도록 작성해 준 것을 확인 할 수 있습니다.

이는 자바스크립트에서 사용하는 addEventListener와 원리는 사실상 똑같습니다. addEventListener에서 우리가 만든 함수나 무기명 함수를 인자로 넣어주는 것과 비슷합니다.

마지막으로, 실제 DOM 요소에만 이벤트 핸들링을 적용할 수 있습니다.

예시에서 나온 button 요소처럼, 실제 존재하는 DOM 요소에만 적용된다는 것입니다.

React 컴포넌트와 같이, 실제로 존재하는 DOM 요소가 아니라면, 이벤트 핸들러를 넣어도 그냥 props 처리되고 실제로 이벤트 핸들링이 되지는 않을 것입니다.

Component Lifecycle

컴포넌트의 생명주기

생명 주기(Lifecycle)라는 개념에 대해 들어보신 적 있나요? 저는 경영학과 출신이다 보니, 마케팅을 배우면서 제품의 생명 주기에 대해 배운 기억이 제일 먼저 떠 오릅니다. 그 외에도 다양한 분야에서 생명 주기는 자주 등장하는 개념입니다.

생명 주기는 어떠한 프로세스 내에서, 특정 타이밍에 특정 동작이 일어나는 지에 대해 설명하는 개념이라고 할 수 있습니다.

React의 핵심이라고 할 수 있는 컴포넌트가 바로 이 생명 주기의 개념을 동반하고 있습니다.

컴포넌트도 탄생과 죽음을 경험합니다. 뚱딴지같은 소리일 수도 있지만, 실제로 그렇습니다.

보통 컴포넌트가 브라우저 내에 그려지는(렌더링되는) 순간을 탄생이라고 간주하고, 다시 브라우저에서 사라지는 순간을 죽음이라고 간주합니다.

즉, 컴포넌트의 생명 주기는 브라우저에 그려졌다가 다시 사라지는 그 사이의 과정을 한 단어로 나타낸 것입니다.

그리고 그 과정에서, 개발자가 더 많은 기능을 활용할 수 있도록 특정 생명 주기 메서드들이 지원됩니다.

컴포넌트가 렌더링 될 때, 사라질 때, 변경될 때 이러한 메서드들을 사용해서 특정 동작을 실행할 수 있는 식입니다.

생명 주기 메서드

들어가기에 앞서, 해당 내용은 아래 웹 페이지를 참고하시면 좋습니다.

메서드들을 소개하면서, 우리가 일반적으로 자주 다루는 메서드들 위주로 설명할 생각이기 때문에, 혹시 아래에서 언급되지 않은 메서드들에 대해 궁금하신 분들 역시 아래 링크에서 메서드들에 대한 내용을 찾아보시면 될 것 같습니다.

<주요 생명 주기 메서드>

https://ko.reactjs.org/docs/react-component.html

<컴포넌트 생명 주기 도식화>

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

컴포넌트가 마운트(Mount)될 때

마운트라는 것은 컴포넌트의 인스턴스가 생성되어서 DOM 구조 내에 삽입되는 것을 말합니다.

이 과정에서는 constructor / render / componentDidMount 의 순서로 호출이 이루어집니다.

먼저 constructor 함수는 컴포넌트가 실제로 마운트되기 전에 호출됩니다. constructor 함수는 class 컴포넌트를 만들 때 언급한 바 있습니다. 컴포넌트를 새로 만들 때 마다 호출되는 클래스 생성자 메서드라고 보시면 됩니다.

다음으로 render 함수는 컴포넌트가 새 화면을 그리게 되는 시점에 호출이 됩니다.

componentDidMount는 render 함수가 jsx를 전부 화면에 그리고 나면 호출됩니다. 이름이 직관적이죠?

따라서 컴포넌트가 화면에 다 그려진 이후에 실행하고자 하는 것들은 모두 componentDidMount 메서드로 동작시킬 수 있을 것입니다.

컴포넌트가 업데이트(Update)될 때

말 그대로 컴포넌트의 내용이 업데이트, 변경될 때 호출되는 메서드들입니다.

render / componentDidUpdate의 순서로 호출됩니다.

컴포넌트 업데이트는 사실 컴포넌트가 마운트 되는 과정과 거의 비슷합니다. 단, constructor 함수가 호출되지 않을 뿐입니다.

당연히 업데이트해야 하는 부분을 화면에서 변경하기 위해 render 함수가 먼저 호출될 것입니다.

화면에 컴포넌트가 다 그려져야 componentDidUpdate가 호출되기 때문에, 아까와 마찬가지로 컴포넌트 업데이트 직후 실행시킬 동작들은 이 메서드로 반영해줄 수 있겠습니다.

컴포넌트가 해제(Unmount)될 때

컴포넌트가 해제된다는 것은 쉽게 생각해서 컴포넌트가 제거될 때라고 보시면 되겠습니다.

이 과정에서 주의깊게 살펴 볼 만한 메서드는 하나, componentWillUnmount입니다.

componentWillUnMount도 이름이 참 직관적입니다. 이 메서드는 컴포넌트가 화면에서 소멸하기 직전 호출되는 함수입니다.

Create React App

CRA란 무엇인가

Create React App, 줄여서 CRA라고도 부릅니다.

CRA는 페이스북 팀에서 오픈 소스로 만든 React 개발 환경 구축 툴입니다. React도 페이스북에서 만든 거고, 이 친구도 페이스북에서 만든거라 공식적으로 React에 지원되는 툴이라고 보시면 됩니다.

React 개발을 시작할 때, React와 React DOM 설치하셨던 것 기억나시나요? CRA는 이러한 기본 패키지 설치부터 시작해서, 보편적으로 쓰이는 React 개발 환경 설정을 간편식처럼 제공해주는 툴입니다.

밑에서 설명하겠지만, 간단한 명령어 몇 줄로 React 프로젝트 하나를 뚝딱 준비할 수 있습니다.

https://create-react-app.dev/

혹시나 CRA에 대해 더 많은 궁금점이 있으시다면, 위 링크도 한번 참고해 보세요. CRA 공식 홈페이지입니다.

CRA 시작해보기

CRA로 직접 프로젝트를 구축해보면 어떤 것인지, 왜 쓰는지 바로 알 수 있습니다.

새 터미널을 열어서 다음 명령어를 입력해 보세요.

$npx create-react-app cra-basic

뒷 부분의 cra-basic은 제가 만들 프로젝트 폴더의 이름이기 때문에, create-react-app 뒷 부분은 본인이 만들고 싶은 폴더명으로 맘대로 만드세요. 참고로 대문자는 못 씁니다.

npx는 npm 5.2 버전 이상이면 자동으로 설치가 되어 있기 때문에, npx를 따로 설치하거나 그러실 필요는 없을 것입니다.

명령어를 치고 조금 기다리면, 현재 디렉토리에 폴더가 만들어 집니다!

다음과 같은 결과가 나오면 성공적으로 폴더를 만든 것입니다. 밑에 명령어 두 줄을 더 치고 시작하라고 하네요.

cd cra-basic
npm start

cd로 시작하는 명령어는 내가 만든 프로젝트 폴더로 디렉토리를 변경하는 것이고, npm start는 개발 서버를 열어서 CRA로 만들어진 폴더의 결과물을 보여주는 명령어입니다.

localhost 포트 3000에 막 생성한 React 프로젝트가 잘 열리는군요.

현재 들어간 CSS, 로고 등은 모두 CRA 팀에서 사전에 설정해 둔 것입니다. 그래서 앞으로 내가 직접 프로젝트를 구성하면서 저 화면을 내가 만들고 싶은 것들로 채우면 되겠죠.

폴더 안에는 무엇이 생겼는지도 한번 봐 볼까요?

(VSCode의 경우, 터미널에서 code .를 치면 해당 폴더가 바로 VSCode에서 열립니다.)

명령어 하나 쳤는데, package.json 부터 해서 주렁주렁 많이도 생겼습니다. 보시면 이미 React 개발에 필요한 패키지, 폴더, 심지어는 Git 관리까지 준비된 상태라는 것을 알 수 있습니다.

명령어 하나로 React 프로젝트 초안을 뚝딱 손질한 거라고 할 수 있습니다.

package.json 뜯어보기

package.json을 한 번 살펴 보겠습니다.

윗 부분에 @testing-library로 시작하는 패키지가 3개나 있는데, 이 친구들은 React 프로젝트 테스트를 위한 라이브러리입니다. 나중에 테스트를 다루면서 다시 이야기하겠습니다.

그 다음에는 React 개발에 핵심적인 react와 react-dom 패키지가 설치되어 있는 것을 확인 할 수 있습니다. CDN 방식으로 React를 써보신 분들은 이미 익숙하실 겁니다.

그 아래 react-scripts 같은 경우에는, 방금 우리가 해 본 것 처럼 개발 서버를 띄우거나, 배포 단계에서 빌드를 할 때 사용하는 라이브러리입니다.

마지막 web-vitals는 구글에서 사이트 사용 경험을 측정하는 라이브러리이고, 그냥 이런 게 있다 정도만 알고 넘어가시면 됩니다.

그 밑에는 scripts 파트도 작성이 되어 있는데, 개발 서버를 열거나, 빌드를 하거나, 테스트를 하는 등 다양한 케이스를 위한 스크립트가 준비되어 있습니다.

npm start 같은 경우에는 개발 서버를 열고, 소스 코드가 수정될 때 마다 새롭게 컴파일 해서 화면에 반영시켜 줍니다.

npm build는 웹 페이지를 배포할 때 사용하는 스크립트로, 프로젝트 폴더 내에 build라는 이름의 폴더를 만들고 배포를 위한 파일들을 구성해줍니다.

npm test의 경우에는 어플리케이션 테스트를 위한 스크립트고, eject는 CRA 라이브러리를 사용하지 않고 제거할 때 씁니다. React 자체가 제거되는 것은 아니고, CRA의 react-scripts 라이브러리만 사라집니다.

지금까지 package.json 안의 내용들을 대충 훑어 봤는데요. 요약하자면, React 개발을 위한 다양한 초기 세팅이 모두 포함되어 있다는 것을 알 수 있습니다.

profile
Frontend Developer

0개의 댓글