[TIL] React란 무엇인가?

오늘은 새로운 프레임워크인 React 배웠습니다.

리액트란?

리액트는 페이스북에서 제공해 주는 프런트엔드 라이브러리이다. 또한 리액트는 컴포넌트 기반으로 되어있어서 컴포넌트에 데이터를 주면 개발자가 설계한 대로 UI가 만들어져 사용자에게 보여진다. 그리고 UI 단위(컴포넌트)로 쪼개어 코드를 관리하므로, 어플리케이션이 복잡해져도 코드의 유지 보수가 용이하다. Virtual DOM이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링 하여 최소한의 DOM 처리로 컴포넌트들을 업데이트하여 속도가 빠르다.

컴포넌트란?

컴포넌트는 각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같다. 쉽게 말해 버튼, 입력창, 표 텍스트 표시, 섹션 a, 섹션 b 등 여러 화면에 사용되고 표시될 요소들을 만든 뒤, 이를 조합해서 화면을 구성한다.

[App.js]

import React from 'react'

function Food() {
  return <h1>Hello!!</h1>
}

function App() {
  return Food()
}

export default App

component는 html을 반환하는 함수라고 말할 수 있는데 App.js(jsx) → index.js → index.html 순서로 렌더링 이 됩다. Food()라는 컴포넌트를 App()이라는 컴포넌트에 보내서 export로 App()을 내보내주어 index.js에서 render 할 수 있게 합니다.

[index.js]

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

index.js에서는 App.js에서 받아온 App()컴포넌트를 id 값이 root인 곳에 넣어줍니다. 컴포넌트는 하나의 컴포넌트만 렌더링 해야 하기 때문에 최종적으로 App() 컴포넌트만 렌더링을 해줍니다

[index.html]

<div id="root"></div>

이곳에 우리가 app.js에서 설정한 컴포넌트가 추가되어 화면에 Hello!! 보여집니다.

Props란?

props는 프로퍼티(properties)의 줄인 말로 React 문법이다. 어떠한 값을 컴포넌트에게 전달해 줘야 할 때 사용하고 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로서 (자식 입장에서) 읽기 전용이다 그리고 부모 컴포넌트에서 자식 컴포넌트로 전달되는 바꿀 수 없는 데이터다.

import React from 'react'

function Food(props) {
  return <h1>I like {props.name}</h1>
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food name="apple" />
    </div>
  )
}

export default App

Food()를 호출하는 부분에 props의 name의 속성값을 apple로 지정한다 그럼 이제 자식 컴포넌트인 Food()에서 부모 컴포넌트인 App()에서 지정했던 name 속성값을 사용할 수 있는데 props를 렌더링 하기 위해 내부의 중괄호() 안에 작성 해야 한다

Map 메서드란?

map 메서드는 배열의 요소를 일괄 변경해야 할 경우 활용합니다. arr 배열 안에 각 객체 뒤에다 🔥 모양을 추가해 보겠습니다

const arr = ['하나', '둘', '셋', '넷']

const arr2 = arr.map(number => number + '🔥')

console.log(arr)
console.log(arr2)

arr라는 변수에 배열을 추가합니다. arr2라는 변수에서 map 메서드를 사용하는데 첫 번째 인자로는 배열을 불러올 이름을 입력합니다( 어떤 이름이든 상관없습니다 ) 그다음 ES6 문법인 화살표 함수 통해 실행할 값을 입력합니다 첫 번째 인자에 입력한 이름을 불러와 불꽃 모양을 추가했습니다

console.log로 확인을 해보면 이렇게 됩니다.