[FE_Bootcamp] 27일차

오늘부터 프론트엔드의 꽃! 리액트를 배우기 시작했다.

사실, 부트캠프를 듣기 전에 혼자 공부해볼까 하고 인강까지 구매했지만 결과는,..,.,,,

그래서 리액트가 뭔지 1도 모르는, 소위 '리알못' 상태로 강의를 듣게 되었다.

1. React란?

리액트는 프론트엔드 개발을 위한 자바스크립트 라이브러리이다.

라이브러리란 어떤 기능 구현에 필요한 코드들의 묶음이라고 보면 되겠다.

즉, 리액트는 '프론트엔드 개발에 필요한 코드들의 묶음'인 것이다.

2. React의 특징

리액트는 기존 웹 개발에 쓰이던 HTML, CSS, JS와는 차별화된 기능을 가지고 있다.

A. 선언형

HTML, CSS, JS를 이용해 웹 개발을 하려면, HTML을 이용해 페이지 뼈대를 만들어준 뒤, CSS로 스타일을 입히고, JS로 기능을 추가해 주는 것이 일반적이었다.

각 요소들을 만들기 위해 파일을 3개 만들어야 하고, HTML 파일에 CSS와 JS 파일을 연결해주는 작업도 필요했다.

때문에 코드가 길어지고 변수, 클래스 등이 많아질수록 유지보수가 어려웠을 뿐더러 하나의 요소를 수정하기 위해 다른 수많은 요소들을 수정해야 하는 불필요함도 발생할 수 있었다.

반면 리액트는 하나의 컴포넌트를 '선언'해서 뼈대와 기능을 만들고, 이를 다른 컴포넌트에 '추가'하는 방식을 통해 웹 페이지를 만든다.

쉽게 말해, 기존 HTML 문법은 벽에 직접 "오늘 9시 미팅"이라고 쓴 뒤, 형광펜을 치는 것이라면,

리액트는 벽에 "오늘 9시 미팅"이라는 포스트잇을 벽에 붙이는것과 같은 것이다.

B. 컴포넌트 기반

앞서 리액트는 '컴포넌트'를 만들고, 다른 컴포넌트에 추가하여 페이지를 만들어 간다고 했다.

컴포넌트란, 하나의 기능 구현을 위해 여러개의 코드를 묶어놓은 것을 말한다.

네이버 메인 페이지를 보자. 네이버 메인에는 여러가지 기능을 담당하는 구역들이 있다.

한 구역에는 버튼, 입력창 등 수많은 HTML 요소들과 기능들이 탑재되어 있다.

이 구역을 이루는 코드들을 하나의 '컴포넌트'라고 보면 되겠다.

컴포넌트는 유지보수가 편리하며 재사용성도 높고. 컴포넌트간의 의존성이 줄어 독립적으로 작성 가능하다는 장점이 있다.

어떤 기능을 빼고 싶을 때, HTML은 해당 코드가 있는 부분으로 가서 코드를 지우고, JS 파일에서 기능을 지우고,.,.,.등의 과정이 필요하지만, 리액트에서는 해당 기능을 가진 컴포넌트만 딱 지우면 되는 것이다.

C. 범용성

위에도 말했듯, 리액트는 다른 파일에 적용이 굉장히 쉽다.

JS의 '라이브러리'이기 때문에, 다른 JS 기반 프로그램에서 당연히 작동될 뿐더러, 사용하던 컴포넌트를 다른 파일에다 옮겨 써도 문제 없다.

게다가 Facebook(현 Meta)에서 개발, 관리하기 때문에 안정적이고, React Native를 통한 모바일 개발도 가능하다!

3. JSX

JSX는 JavaScript XML의 줄임말로, 리액트에서 UI를 구성할 때 사용하는 문법이다.

JSX는 HTML도, JS도 아니기 때문에 JS에서 JSX를 읽어들여 브라우저에 나타낼 수가 없다.

따라서 Babel이라는 '트랜스파일러'를 통해 JS가 읽을 수 있도록 변환해 주어야 한다.

JSX를 사용하면 HTML과 JS를 한번에 작성해 컴포넌트에 담을 수 있다. 기존 HTML 파일과 JS 파일을 사용해 작성한 뒤 연결해주어야 하는 불편함을 덜 수 있어 굉장히 편리하고, 작동 속도도 빠르다.

그렇다면 JSX는 어떻게 작성하는 것일까?

위와 같은 페이지를 만들어 본다고 하자.

먼저 HTML과 CSS를 통해 만드는 방법이다.

See the Pen Untitled by KingGyeongHoo (@KingGyeongHoo) on CodePen.

HTML로 뼈대를 만들어준 뒤, JS에서 querySelector로 div 요소를 불러온다. 그리고 for문을 통해 새로운 p 태그를 만들고, p 태그 안에 teams 배열내 객체를 이용한 문장을 담아준다. 마지막으로 불러온 div 요소에 p 태그를 append하면 끝.

다음은 JSX를 이용해 만드는 방법이다.

let teams = [{
    name : 'Arsenal',
    rank : 1
  },
  {
    name : 'Man City',
    rank : 2
  },
  {
    name : 'Man Utd',
    rank : 3
  },
  {
    name : 'Tottenham',
    rank : 4
  },
  {
    name : 'Newcastle',
    rank : 5
  }]
  
const Component = () => {
//붙여줄 컴포넌트
  return(
    <div>
      <h1>오늘의 프리미어리그</h1>
      {teams.map(team => {
      //map 메서드를 통해 반복
        return <p>{team.rank + '위는 ' + team.name+ '입니다!'}</p>
        })}
    </div>
    //div 태그 안에 글을 작성한, HTML 형태를 리턴
  )
}

function App() {
  return (
      <Component />
      //브라우저에 Component 컴포넌트를 붙임
  );
}

export default App;

확실히 JS와 HTML이 합쳐져 있어 한번에 보기도 편하고, 브라우저에 컴포넌트를 붙이는 방식이기 때문에 수정하고 싶은 컴포넌트만 수정할 수 있게 되어있다.

4. JSX 사용시 주의할 점

JSX 문법을 사용할 때는 몇가지 지켜야 할 사항이 있다.

JS와 거의 동일하지만, 아주 사소하게 다른 부분이 있기 때문에 꼭 알고 넘어가야 한다.

● 여러 엘리먼트 작성시 반드시 하나의 태그로 묶어서 작성

● 클래스명은 class가 아닌 className으로 작성

● JS 표현식 사용시 반드시 중괄호( { } ) 사용. {}를 사용하지 않으면 그냥 텍스트로 인식함

● 엘리먼트는 반드시 대문자로 작성. 아니면 일반 HTML 엘리먼트로 인식

● 조건 연산자는 if-else문이 아니라 삼항연산자 사용

● 반복문은 for문이 아닌 map() 메서드 사용

노베이스로 강의를 듣다보니 조금 어려운 부분도 있었지만, 대충 원리를 이해하고 나니 많이 할만해 진 것 같았다.

리액트 과제를 하며 직접 컴포넌트를 붙이다 보니 이제 조금 알것 같기도,.,.,.,.

앞으로도 파이팅~

'Frontend Study' 카테고리의 다른 글

[FE_Bootcamp] 32일차_브라우저의 작동 원리 (0)	2023.03.28
[FE_Bootcamp] 28일차_React SPA (0)	2023.03.24
[FE_Bootcamp] 26일차_fetch와 json (0)	2023.03.21
[FE_Bootcamp] 25일차_비동기 (0)	2023.03.20
[FE_Bootcamp] 24일차_Underbar (0)	2023.03.19

그라운드에선 황금발이었던 내가 컴퓨터 앞에선 개발??

[FE_Bootcamp] 27일차_React 기초

1. React란?