<frontend> {14} </React_part 1. Basic>

🤔 React 라이브러리...?

 

JS를 사용해 HTML로 구성된 UI를 제어했다면, DOM 변형을 위해 아래와 같은 과정을 따른다.
1. Selector API를 사용해 특정 DOM을 선택
2. 특정 이벤트가 발생 시, 변화를 주도록 설정

다만, 웹의 규모가 커지게 되면, DOM을 직접 건드릴 때 코드가 난잡해지기 쉽다.
처리해야할 이벤트, 관리해야할 상태값, DOM 등이 다양해지기 때문.
이로 인해 업데이트 규칙도 많이 복잡해지게된다.

React는 어떤 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는 방식이 아닌, 아예 다 날려버리고 처음부터 새로 만드는, 가상의 DOM인 Virtual DOM방식을 사용한다.

Ex.

import React from 'react';

를 통해 react 컴포넌트를 불러온다.
react 컴포넌트는 XML형식의 값을 반환하는데, 이를 JSX라 부른다.

export default Hello;

이는 Hello라는 컴포넌트를 내보내겠다는 의미로 다른 컴포넌트에서 불러와 사용할 수 있다.
ex)

import Hello from './Hello';

import React from 'react';

function Hello() {
    return (
            <div>
                Hello World
            </div>
        );
}

export default Hello;

 

 

 

 

 

 

 

---

🤔 JSX...?

JSX는 react의 생김새를 정의할 때 사용하는 문법으로 HTML같이 생긴 JS이다.

return <div>안녕</div>;

react 컴포넌트 파일에서 XML형태로 코드를 작성하면 babel이 JSX를 JS로 변환한다.
babel: JS의 문법을 확장해주는 도구

ex)

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

export default App;

📌 JSX에서 태그의 style, CSS의 class를 설정하는 방법
1. 인라인 style은 객체형태로 작성
2. HTML에서 -로 구분되는 단어는 camelCase형태로 작성
3. CSS의 클래스는 className= 으로 설정

cf. 주석은 {/**/} 나 // 을 사용함.
를 사용해 HTML로 구성된 UI를 제어했다면, DOM 변형을 위해 아래와 같은 과정을 따른다.
1. Selector API를 사

 

 

 

 

 

---

📌 props를 통해 컴포넌트에 값 전달하기
- properties의 줄임말로 컴포넌트에 값을 전달하기 위해 사용.

Ex) App 컴포넌트에서 Hello컴포넌트의 name이라는 값을 전달하고 싶다면?

∙Hello.js 컴포넌트

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

 

∙App.js 컴포넌트

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

 

cf) 여러개의 props를 전달하고자 한다면?

∙App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;​

∙Hello.js

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

export default Hello;

 

defaultProps 로 기본값 설정

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 된다.

import React from 'react';

function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}

Hello.defaultProps = {
  name: '이름없음'
}

export default Hello;