TIL: 2022-09-28

⚙️ 오늘 배운 주제

React 기초

 

🐹 오늘의 기분

리액트를 처음으로 접해보았다. JSX 문법이 익숙하지 않아서 코드를 쓰며 많이 헷갈렸다. 페어분이 리액트를 써보신 적이 있어서 덕분에 많이 배웠다. 혼자였으면 어엄청 헤맸을 듯 ㅠㅠㅋㅋㅋㅋ 그리고 오늘 페어 시간에 내 실수로 오류가 생겨서 시간을 조금 많이 잡아먹었다ㅠㅠ.. npm으로 실행하는 모든 명령어가 작동이 안 돼서 테스트도 못하고 페어분이 공유해주시는 화면 보면서 해야 했다. 페어분께서 이해해주셔서 다행이었지만 너무 죄송했다.. 흑흑 그래도 페어 시간 끝나고 해결해서 다행이다.

오전에 너무 피곤해서 집중이 힘들었다. 내일도 오늘과 비슷한 일정인데 부디 내일은 오늘보다 덜 피곤했으면 좋겠다. 영양제도 잘 챙겨먹고 운동도 잘하고 있는데 왜인지 모르겠다ㅠ 

 

🗝 키워드

JSX, 컴포넌트, Babel, create-react-app

 

🗣 스스로에게 설명

React는 자바스크립트의 라이브러리이다. 

라이브러리는 함수의 집합으로, 코드 작성을 더 편리하게 해준다. 

 

React의 주요 세 가지 특징은 다음과 같다.

• 선언형
• 컴포넌트 기반
• 범용성

선언형 Declarative

기존에는 html, css, javascript를 연결해서 작성해주어야 했는데 리액트를 이용하면 한 파일에 명시적으로 작성해줄 수 있다.

명시적이다 = 코드를 자세히 보지 않고도 어떤 동작을 하는 코드인지 이해할 수 있게 작성되어 있다

리액트에서는 html과 javascript가 결합된 JSX라는 문법을 활용하기 때문이다. 

 

컴포넌트 기반 Component-based

컴포넌트 = 하나의 기능 구현을 위한 여러 종류의 코드 묶음

기능 별로 코드를 분류하기 때문에 기능 자체에 집중하여 개발할 수 있다. 

의존성이 사라지고 독립적으로 나뉘기 때문에 유지보수와 테스트에 편리하다.

 

범용성 

리액트는 JS 프로젝트라면 어디에든 유연하게 사용할 수 있다. 

 

JSX

JavaScript XML(eXtensive Markup Language)

React에서 UI를 구성할 때 쓰이는 것으로, JavaScript를 확장한 문법이다. 

브라우저가 이 문법을 이해하도록 하려면 Babel로 컴파일을 해주어야 한다. 

JSX 말고 React 문법을 쓸 수도 있지만, 가독성 차원에서 JSX를 쓰는 것이 낫다. 

 

 

JSX에는 주의해야 할 문법이 몇 가지 있다. 

모든 요소를 하나의 태그로 감싸주기

// wrong
<div>
  <h1>Good</h1>
</div>
<div>
  <h1>Morning</h1>
</div>

// right
<div>
  <div>
    <h1>Good</h1>
  </div>
  <div>
    <h1>Morning</h1>
  </div>
</div>

여러 엘리먼트를 작성할 때에는 가장 상위에서 감싸주는 부모 태그가 있어야 한다.

 

class (X) className (O)

// wrong
<div class="question">How are you?</div>

// right
<div className="question">How are you?</div>

class를 지정할 때에는 class가 아닌 className으로 써야 한다. 그렇지 않으면 자바스크립트의 class로 인식해버린다. 

 

자바스크립트 표현식 사용 시 중괄호로 감싸기

// wrong
const App = () => {
  const name = "Steve";
  return (
    <div>
      Good morning, name
    </div>
  )
}

// right
const App = () => {
  const name = "Steve";
  return (
    <div>
      Good morning, {name}
    </div>
  )
}

중괄호를 쓰지 않으면 일반 텍스트로 인식한다. 

표현식과 문은 변수에 할당할 수 있는가 없는가로 구별할 수 있다. (이게 제일 간단하다)

변수에 할당이 가능하면 표현식이고, 아니라면 문이다.  

 

사용자 정의 컴포넌트는 대문자로 시작

// wrong
const greet = () => {
  return <div>hello! how are you?</div>
}

const greeting = () => {
  return <greet />
}

// right
const Greet = () => {
  return <div>hello! how are you?</div>
}

const Greeting = () => {
  return <Greet />
}

소문자로 쓰면 html 엘리먼트로 인식된다. 

 

조건부 렌더링은 if문 대신 삼항연산자 사용

<div>
  {
    (100 + 20 === 120 ? (<p>right answer</p>) : (<p>wrong answer</p>)
  }
</div>

if문은 말 그대로 '문'이기 때문에 JSX에서는 중괄호를 쓰더라도 작성할 수 없다. 변수에 할당이 가능한 표현식인 삼항 연산자를 이용해야 한다.

 

map 사용 시 각 요소에 key 부여하기

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((num) => 
  <li key={num.toString()}>
    {num}
  </li>
);

객체가 담긴 배열을 map으로 렌더링할 때에는 각 객체의 id 속성값을 key로 부여하는 것이 가장 권장된다.

만약 객체에 id 속성이 없다면 리스트의 인덱스로 부여할 수 있지만 그건 최후의 방법이라고 한다. 

 

리스트와 Key – React

 

create-react-app

앞서, JSX에서 작성한 코드를 브라우저에 렌더링하려면 Babel로 컴파일을 해야 한다고 했다. 

하지만 이것도 배우려면 만만치 않기 때문에 리액트를 써보기도 전에 지치기가 쉽다. 

리액트 프로젝트를 더 쉽게 만들기 위해 제공되는 커맨드가 create-react-app이다. 

 

작업할 디렉토리에서 npx create-react-app 원하는 프로젝트명을 입력하면 알아서 프로젝트가 생성된다. 

npm install 후 npm run start를 입력하면 리액트 서버가 실행되면서 브라우저에서 프로젝트 파일이 열린다. 

 

Create React App: 손쉽게 프로젝트 만들기

 

❓ 막히는 or 막혔던 부분

테스트 중간에 갑자기 메모리 누수가 발생해서 멘붕 왔었다. (Javascript heap out of memory) 구글에 별걸 다 쳐서 해봐도 해결이 안 되길래 아고라스테이츠에 혹시 나랑 같은 문제를 겪은 사람이 있나 궁금해서 쳐봤더니 있었다! 답변을 보니 코드 문제일 가능성이 높다고 다시 클론해서 해보라고 되어있길래 그 말 따라서 천천히 다시 해봤는데 잘 됐다. 뭐가 문제였는지 궁금해서 백업해뒀던 이전 코드랑 비교해봤더니 Features 컴포넌트 안에 Footer를 후손으로 넣어야 하는데 Features를 또 넣어서 생긴 문제였다. 코드를 정신 놓고 썼나보다. 그리고 처음에 fork도 안하고 그냥 클론해온 걸 발견해서 다시 클론할 때 엄청 식겁했었다. 이런 실수를 하다니.... 정신 똑바로 차려야겠다. 

 

🔍 공부가 더 필요한 부분

표현식과 문 (딥다이브 읽기)

프레임워크와 라이브러리의 차이