React 기초 with Codeit

한상욱·2022년 3월 14일
0

What is React?

  • 리액트는 Facebook에서 만든 자바스크립트 라이브러리 중 하나이다.
  • 사용자 인터페이스, 프론트엔드를 만들기 위해 사용된다.

What is JSX?

  • JSX는 자바스크립트의 확장 문법이다.
  • 리액트에서 코드를 작성 시 이 JSX 문법을 이용한다.
  • JSX에서는 속성명을 카멜 케이스로 작성해야한다.
  • 자바스크립트로 HTML과 같은 문법을 사용하게 해준다.

    사실 여러 단어가 조합된 HTML 속성들이 많진 않지만, 예를 들면 onclick, onblur, onfocus 등과 같은 이벤트 속성이나, tabindex 같은 속성들이 있습니다.
    이런 속성들은 모두 onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 처럼 작성하는 것이죠!

하지만 비표준 속성을 다룰 때는 기존의 HTML 문법을 그대로 사용해야 한다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    상태 변경:
    <button className="btn" data-status="대기중">대기중</button>
    <button className="btn" data-status="진행중">진행중</button>
    <button className="btn" data-status="완료">완료</button>
  </div>,
  document.getElementById('root')
);

자바스크립트 표현식 넣기

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png'

function handleClick(e) {
  alert('곧 도착합니다!');
}

ReactDOM.render(
  <>
    <h1>{product + ' ' + model} 주문하기</h1>
    <img src={imageUrl} alt="제품 사진" />
    <button onClick={handleClick}>확인</button>
  </>,
  document.getElementById('root')
);

JSX에서는 { }를 통해 자바스크립트 표현식을 활용한다. 대신 { }안에는 for,if문 등의 문장은 다룰 수 없다.
또한 현재 ReactDOM.render()함수는 아규먼트를 2개를 받는다. 하지만 많은 줄의 코드를 쓰는 html특성 상 위처럼 <> </>로 묶어주면 아규먼트 1개로 인식된다.

✏️리액트 엘리먼트

JSX 문법으로 작성한 요소(element)는 결과적으로 자바스크립트 객체가 된다.

import ReactDOM from 'react-dom';

const element = <h1>안녕 리액트!</h1>;
console.log(element);
ReactDOM.render(element, document.getElementById('root'));

위 같은 객체를 리액트로 화면을 그려내는 가장 기본적인 요소인 리액트 엘리먼트라고 부른다.
이것을 ReactDOM.render 함수의 아규먼트로 전달하게 되면, 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워주는 것이다.

🖋️리액트 컴포넌트

리액트 컴포넌트는 리액트 엘리먼트를 조금 더 자유롭게 다루기 위한 하나의 문법이다.
컴포넌트 함수 이름을 통해 하나의 태그처럼 활용할 수 있다.
그리고 컴포넌트의 이름의 첫글자는 무조건 대문자로 해야한다.

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice() {
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

Dice라는 컴포넌트를 하나 만들었다. 위 컴포넌트는 img 태그를 리턴한다.

import Dice from './Dice';

function App() {
  return (
    <div>
      <Dice />
    </div>
  );
}

export default App;

Dice 컴포넌트를 import하여 html 요소처럼 사용한다.

📌Props

JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있다. 이 속성들을 Props라고 부른다.
Props는 Properties의 약자인데요. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다.

  <Dice color="red" num={2} />

아까 위 코드에서 속성을 이렇게 지정한다. int형식도 { }안에 담는다.

function Dice({ color = 'blue', num = 1 }) {
  const src = DICE_IMAGES[color][num - 1];
  const alt = `${color} ${num}`;
  return <img src={src} alt={alt} />;
}

저렇게 넘긴 props 객체를 컴포넌트에서 구조분해를 통해 color와 num을 사용한다.

구조분해는 배열이나 객체를 쉽게 쪼개서 사용하는 방법.

그리고 현재 Dice({ color = 'blue', num = 1 }에서 지정된 값이 있는데, 만약 props가 들어오지 않으면 사용할 default값을 설정한 것이다.

🍼Children

props에는 children이라는 조금 특별한 프로퍼티(prop, 프롭)가 있습니다.

JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 됩니다.

function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;
------------------------------------
<div>
  <Button>던지기</Button>
  <Button>처음부터</Button>
</div>

children은 화면에 보여질 더 직관적인 코드를 위해 활용한다.

🎲State

state는 리액트에서 화면을 그려내는 데 굉장히 중요한 역할을 한다.
상태가 바뀔 때마다 화면을 새롭게 그려내는 방식으로 동작을 하는 것.

import { useState } from 'react';

function App() {
  const [num, setNum] = useState(1);

state는 useState(초기값)을 통해 생성한다. 첫번째 요소가 state이고, 두번째 요소가 state를 바꾸는 setter 함수이다.
setter 함수는 set+State라는 카멜케이스형식을 이름을 지어주는 경우가 일반적이다.

// ...const [gameHistory, setGameHistory] = useState([]);

  const handleRollClick = () => {
    const nextNum = random(6);
    setGameHistory([...gameHistory, nextNum]);// state가 제대로 변경된다!
  };

배열 같은 경우는 참조형이라서 정보의 주소값을 갖는다. 그래서 state에 배열을 넣어두면 배열의 요소를 아무리 바꿔도 주소값은 바뀌지 않기에 state가 변화를 눈치채지 못한다. 그래서 배열을 spread문법으로 쪼갠 다음에 새로운 배열로 만들어서 넣어주어야 state 변화가 인지된다.

🗽스타일링

import diceImg from './assets/dice.png';
import './Dice.css';

function Dice({ className = '' }) {
  const classNames = `Dice ${className}`;
  return <img className={classNames} src={diceImg} alt="주사위 이미지" />;
}

export default App;

css 파일을 불러올 때, from 키워드 없이 import 구문으로 불러오면 된다.
CSS 파일에 정의된 클래스명을 className prop에 문자열로 넣어주면 됩니다. 이때 재사용성을 위해 className prop을 부모 컴포넌트에서 받으면 더 좋습니다.

🙌ETC

컴포넌트의 장점

  • 반복적인 개발이 줄어든다.

  • 오류를 고치기 쉽다.

  • 일을 쉽게 나눌 수 있다.

그러니 컴포넌트랑 state를 잘 이용하자!!!!!!!!!!!

React 렌더링

우리 똑똑한 React는 먼저 Virtual DOM에서 렌더링하고 변경사항들만 모아서 실제 DOM에서 렌더링을 진행한다.

profile
한상욱
하고 싶은 게 많은 사람
다음 포스트

30분 일찍 퇴근하게 해주는 VS CODE 단축키

0개의 댓글