[TIL] #21. 리액트와의 첫만남

2022.6.2. (목)

1. 오늘의 소감

• 드디어 프론트엔드의 꽃이라는 ‘리액트(React)’ 만났다. 리액트의 파일 구조라든가, JSX 문법이라든가… 아직 생소하지만, 첫인상이 나쁘지 않다. 새로운 라이브러리를 익히는 번거로움보다, 그로인해 얻게 되는 편리함이 더 크게 느꼈기 때문이다. 가령 이전 바닐라 자바스크립트로 개발을 할 때는 기능을 넣기 위해 DOM을 일일이 연결해줘야 했고, 구조 확인을 위해 HTML 파일로 왔다리갔다리 해야했다. 하지만 리액트에서는 JSX 문법으로 HTML 과 JS를 한방에 처리하기 때문에 HTML 파일을 따로 작성할 필요가 없다. 따라서 DOM 연결도 필요없다! 게다가 기능과 구조를 묶음인 컴포넌트 단위로 코드를 짜기 때문에 훨씬더 직관적인 개발이 가능하다. 물론 아직 초입이라 리액트의 장점을 뚜렷하게 느끼지는 못했다. 말 걸기 어색한 잘나가는 친구를 보는 느낌이랄까. 계속 사용하다보면 이 어색함도 분명 편리함으로 치환되겠지…? 리액트야, 우리 친하게 지내자…

2. 학습한 키워드

• 리액트, 선언형, 컴포넌트 기반, 범용성, JSX, JSX 주요 문법 6가지, <React.Fragment>, 표현식, key JSX 속성, 컴포넌트, Bottom-up 방식, Babel, create-react-app

3. 키워드를 바탕으로 학습 내용 설명해보기

• 리액트는 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리이다.
• 리액트는 크게 3가지의 특징을 가진다.
  • 선언형 : JSX 문법을 통해 기능과 구조를 같이 코딩할 수 있기 때문에, 내가 무엇(What)을 만들고 있는지에 집중하여 개발할 수 있다.
  • 컴포넌트 기반 : 하나의 기능 단위인 컴포넌트 기반으로 개발을 한다. 컴포넌트는 독립적이고 재사용이 가능해서 효율적으로 페이지를 구성할 수 있다. 또한 에러가 나도 해당 기능을 구현한 컴포넌트만 수정하면 되기 때문에 유지보수가 쉽습니다.
  • 범용성 : 페이스북에서 관리되기 때문에 다른 라이브러리에 비해 버그가 적고, 업데이트, 유지보수가 잘 된다. 또한 라이브러리여서, 다른 프레임워크 안에서도 적용할 수 있고, 리액트 네이티브를 통해 모바일 개발도 가능하다.
• JSX는 리액트에서 UI를 구성할 때 사용하는 HTML 과 JavaScript 를 결합한 문법이다. JSX는 브라우저에서 바로 실행할 수가 없다. Babel 이라는 무료 오픈소스 컴파일러를 이용해야, 브라우저가 실행할 수 있는 자바스크립트로 변환된다.
• JSX 에서는 DOM을 사용하지 않는다. 즉, document.querySelector() 를 사용할 일이 없다. HTML 문서도 거의 필요 없다. JSX 를 사용해 js 파일 안에서 마크업과 기능 구현을 함께 할 수 있다. 하나의 컴포넌트를 만들고, 그 컴포넌트를 직접 DOM에 배치할 수 있다.
• JSX 주요 문법 6가지
  1. 최상위 태그 하나만 리턴한다.
     → 최상위 태그를 <></> (<React.Fragment>) 로 감싸 줄수 있음. 이건 실제 DOM에 추가 되지 않음.
     → 배열을 넣어줘도 하나의 덩어리로 인식하기 때문에 괜찮다.
  2. className 으로 써야한다.
     → 그냥 class 를 쓰면 객체지향프로그래밍의 클래스로 인식한다.
  3. 자바스크립트 문법은 중괄호{} 안에 써줘야한다. 주석도 중괄호 안에!
  4. 사용자 정의 컴포넌트는 대문자로 시작한다. (PascalCase)
  5. 조건부 랜더링은 if문이 아닌, 삼항 연산자를 사용해야한다.
     → ‘표현식’이란 값으로 변환 가능한 코드 덩어리로, 변수에 담길 수 있는 것이다.
     → 결과값이 나오는 ‘표현식'이어야 되기 때문이다. if 문은 값으로 변환되지 않는다.
  6. 여러 엘리먼트를 표시하고 싶을 땐 map()을 사용한다.
     → 이 때 key 속성값은 변하지 않고, 고유하며, 예상 가능한 것이여야한다. Math.random() 으로 주면 안된다.
     → 단, map 의 최상위 첫번째 엘리먼트에 key 속성을 주어야한다.
• 컴포넌트란, 하나의 기능을 구현하기 위한 코드 묶음이다.
• 컴포넌트는 UI를 구성하는 필수 요소이자, 리액트의 심장이다.
• 컴포넌트를 조합하면 하나의 애플리케이션이 완성된다.
• 컴포넌트는 트리구조를 가진다.
• 각각의 컴포넌트는 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당하고 있다.
• 컴포넌트 부터 개발하고 그것을 조합하여 전체를 만드는 방식을 Bottom-up 방식이라고 한다.
• 원하는 디렉토리로 이동 후, 터미널에 다음과 같이 입력하면 바로 리액트 개발을 시작할 수 있다.→ 이걸 실행하면, 프로젝트 디렉토리가 생성되고, 개발에 필요한 여러 노드 모듈을 자동으로 다운받아준다.
• npx create-react-app [프로젝트 폴더명]
• create-react-app 은 리액트 개발에 필요한 툴 세팅도 미리 해준다.
• 자동으로 package.json 파일에 script 가 작성되어 있다.→ 파일을 저장하면, 서버에 바로 반영이 되서 따로 새로고침할 필요 없다.(핫리로딩)
  → live server 로 열면 안된다. 이걸로 열면 JSX가 Babel 로 컴파일이 안된 상태여서 브라우저가 js 파일을 실행할 수 없다.
  → npm run start 로 앱 실행 가능! 실행 종료는 ctrl + C