React 컴포넌트 생성하기

JSX 문법에 주의사항은 다음과 같다.

• 중괄호 내에 자바스크립트 표현식만 넣을 수 있다. ( 삼항 연산자, &&, ||)
• 숫자, 문자, 배열만 렌더링되고 boolean, undefined, null은 출력되지 않고 object를 에러가 발생한다.
• 태그 시작과 종료가 반드시 매칭되어야한다.
• 최상위 태그는 반드시 하나만 있어야 한다. (<></> 빈태그 가능)
• class 키워드 대신 className 키워드 사용
• label for 키워드 대신 htmlFor 키워드 사용

버튼 컴포넌트를 만들어 보자.

Button.jsx 파일을 하나 생성한 후 다음과 같이 작성하면 컴포넌트를 생성할 수 있다.

컴포넌트는 대문자로 시작되어야 한다는 규칙이 있다.

const Button = ({ children, text, color = "black" }) => {
  const onClickButton = () => {
    console.log(text);
  };

  return (
    <button style={{ color }} onClick={onClickButton}>
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

 

children은 버튼 컴포넌트 안쪽 코드를 의미한다. 아래 코드에서는 <div>자식요소</div>가 여기에 해당된다.

      <Button text={"블로그"}>
        <div>자식요소</div>
      </Button>

 

그 외 Props로 전달한 속성을 컴포넌트에 전달할 수 있다. Button은 text, color 두 가지 속성을 가지고 있고 color 값이 없는 경우 자동으로 "black"으로 설정되도록 만들었다.

 

다음은 Input 입력을 컴포넌트로 만들어 보자.

Input 입력은 2가지 방식으로 동작 가능하다.

 

입력을 제어(controlled)하는 방식과 입력을 제어하지 않고 input 자체를 사용하는 경우 비제어(uncontrolled) 두 가지 방식으로 사용이 가능하다.

제어하는 방식으로 사용한다면 value가 존재하면 onChange 이벤트는 반드시 구현되어야 한다.

아래는 입력을 제어/비제어 하는 input을 만들어본 예제이다.

const InputText = ({ id, label, defaultValue, value, onChange, disabled }) => {
  const handlerChange = (e) => {
    if (onChange) onChange(e);
  };

  const isControlled = typeof value !== "undefined";

  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input
        type="text"
        id={id}
        className={disabled ? "disabled" : ""}
        defaultValue={!isControlled ? defaultValue : undefined}
        value={isControlled ? value || "" : undefined}
        onChange={handlerChange}
      />
    </div>
  );
};

export default InputText;

import { useState } from "react";
import "./App.css";
import InputText from "./components/Input";
function App() {
  const [value, setValue] = useState("");
  const handlerChange = (e) => {
    console.log(e.target.value);
    setValue(e.target.value);
  };
  return (
    <>
      <InputText
        id="input1"
        disabled={true}
        defaultValue={"기본 값"}
        label={"uncontrolled"}
      />

      <InputText
        id="input2"
        label={"controlled"}
        value={value}
        onChange={handlerChange}
      />
    </>
  );
}

export default App;