Unit4 회고

YEN J·2022년 9월 28일
0

code states

목록 보기
20/43

[React] Intro

React란 무엇일까?🥸

프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리

리액트의 특징

  • 선언형
    • 코드를 자세히 분석하지 않고도 코드의 의도를 분명히 알 수 있게 작성하는 방식
    • 하나의 파일에 명시적으로 작성할 수 있도록 JSX를 활용한 선언형 프로그래밍을 지향
  • 컴포넌트 기반
    • 독립성: 컴포넌트 간 의존성이 없어져 독립적인 작동이 가능
    • 재사용성: 이전에 작성된 기능 구현 시 해당 컴포넌트 재사용 가능
      • 기능 작동 자체에 집중하여 개발 가능
      • 유지보수나 유닛테스트에 용이
  • 범용성
    • 기존 프로젝트에도 유연하게 사용 가능
    • 리액트 네이티브로는 모바일 개발도 가능

🔅 JSX

JSX란❓

  • JavaScript를 확장한 문법을 이 문법을 활용해 React 앨리먼트를 만들 수 있음
  • JavaScript만으로(html을 따로 작성하지 않고) 마크업 형태의 코드를 작성하여 DOM에 배치 가능
  • 컴포넌트 단위로 작성
    • Bable: JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일하는 컴파일러

🧐 JSX 규칙

  • 하나의 엘리먼트 안에 모든 엘리먼트가 포함
  • 엘리먼트 클래스 사용 시, className으로 표기
  • JavaScript 표현식 사용 시, 중괄호 이용
  • 사용자 정의 컴포넌트는 대문자로 시작
  • 조건부 렌더링에는 if문이 아닌 삼항 연산자 사용
    • 삼항 연산자는 문장이 아닌 표현식이기 때문에 중괄호 안에 넣을 수 있다는 것을 명심할 것❗️

❗️Key❗️

  • React가 어떤 항목을 변경, 추가 또는 삭제할 지 식별하는 것을 도움
  • 엘리먼트에 안정적인 고유성 부여하는 역할을 수행하기 때문에 고유하게 식별할 수 있는 문자열을 사용하는 것이 적합
    • 대부분 id를 key로 사용
  • key는 형제 사이에서는 고유해야 하지만 전체 범위 내에서는 동일한 key 사용 가능
  • key를 생성할 때 Math.random() 사용은 지양할 것
    • Math.random()을 사용해 key를 돌리면 렌더링 할 때마다 원래의 것이 계속 변하므로 성능 하락의 문제가 생길 수 있음

🔅 컴포넌트

컴포넌트란❓

  • 하나의 기능 구현을 위해 여러 종류의 코드를 묶어놓은 것
  • 리액트 애플리케이션은 컴포넌트들의 관계를 트리 구조로 형상화하여 표현할 수 있음(계층적 구조)

🔅 Create React App

Create React App이란?
리액트 SPA(Single Page Application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인으로 복잡한 개발 세팅을 대신 해준다고 생각하면 이해하기 쉬움

  • 형식: npx creat-react-app 폴더명 형식을 통해 구현 가능

<오늘의 일기>
너무 신기하다는 생각이 들었던 React. 새로운 문법을 보자니 굉장히 낯설고 어색했지만 잘 활용하기만 한다면 정말 편리하겠다라는 생각이 저절로 들었던 유닛이었다. 아직 사용하는 것은 많이 서툴고 문법을 이해하는 것만 가능한 수준이지만 여러 번 반복해서 보면서 익혀야겠다.
이번 페어분은 정말 꼼꼼하게 코드를 이해하려고 하시는 점을 본받고 싶었다. 사실 난 이해하면 그대로 끝이라고 생각하고 어물쩍 넘어가려는 경향이 있는데 페어분께서 이해할 때까지 꼼꼼하게 코드를 분석하려고 하시는 모습을 보고 내 모습을 되돌아보게 되었던 것 같다..
앞으로는 이미 해결한 문제이더라도 내가 그냥 지나친 부분은 없는지 한 번 더 생각해봐야겠다는 생각이 들었다.

0개의 댓글