react.js 입문

- extensions > exlint : 잘못된 문법 검사

rules: {
    'react/jsx-no-target-blank': 'off',
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'no-unused-vars':"off", //추가
    'react/prop-types':"off", //추가
  },

.eslintrc.cjs

[react component] 리액트 컴포넌트
- 컴포넌트 함수를 만들때에 함수 이름 첫글자는 대문자여야함!

JSX : 확장된 자바스크립트의 문법을 말함
- javascript와 html을 혼용해서 사용
JSX 주의사항
1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다.
2. 숫자, 문자열, 배열 값만 렌더링 된다.
3. 모든 태그는 닫혀있어야한다.
* 단일 태그는 셀프 클로징 필요!! ex) <img />
4. 최상위 태그는 반드시 하나여야만 한다.
* 마땅한 태그가 없다면 <></> 빈 태그로 감싸줘도 된다.

const Main = () => {
  const number = 10;
  const obj = { a: 1 };

  return (
    <main>
      <h1>Main</h1>
      <h2>{number % 2 === 0 ? "짝수" : "홀수"}</h2>
      {10}
      {number}
      {[1, 2, 3]}
      {undefined} //화면에 표현되지 않음.
      {null} //화면에 표현되지 않음.
      {obj.a} //객체 값만 반환 가능
    </main>
  );
};

export default Main;

JSX에서 스타일을 입히는 방법?

태그 인라인 스타일 사용(속성은 카멜케이스로 적용!)
- backgroundColor
- borderBottom
별도의 css파일로 작성
- html에서는 class=""로 사용했으나 jsx에서는 className=""으로 적용해야한다.

[props]

props로 데이터 전달하기
- 부모 컴포넌트에서 자식으로 props 전달, 반대로 자식에서 부모로는 전달 불가!
props 내부 값을 조회할 때 props.값 형태로 입력
-> 비구조화 할당 문법을 사용하면 조금 더 간결한 코드 작성 가능
* 비구조화 할당은 객체에서 값을 추출해서 새로운 상수로 선언해 주는 것!

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

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

defaultProps로 기본값 설정
- 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값 설정

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

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

export default App;

import React from 'react';

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

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

export default Hello;

props.children
- 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 떄 사용

[이벤트 처리하기]

이벤트 이름은 카멜표기법
이벤트에 함수 형태의 값을 전달
- 화살표 함수 문법을 사용하거나 렌더링 부분 외부에 미리 만들어서 전달
DOM 요소에만 이벤트를 설정할 수 있음
- 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 불가.

const Button = ({ text, color, children }) => {
  //이벤트 객체
  const onClickButton = (e) => {
    console.log(e);
    console.log(text);
  };

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

Button.defaultProps = {
  color: "black",
};

export default Button;

[State로 상태관리하기]

State : 현재 가지고 있는 형태나 모양을 정의, 변화할 수 있는 동적인 값
state를 갖는 react 컴포넌트 : state의 값에 따라 렌더링되는 결과가 달라진다.

import "./App.css";
import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [light, setLight] = useState("OFF");

  return (
    <>
      <div>
        <h1>{light}</h1>
        <button
          onClick={() => {
            setLight(light === "ON" ? "OFF" : "ON");
          }}
        >
          {light === "ON" ? "끄기" : "켜기"}
        </button>
      </div>
      <div>
        <h1>{count}</h1>
        <button
          onClick={() => {
            setCount(count + 1);
          }}
        >
          +
        </button>
      </div>
    </>
  );
}

export default App;

[State와 Props]

state를 props로 전달하기
const [number, setNumber] = useState(0);
-> number는 현재상태, setNumber는 setter 함수
* setter함수는 파라미터로 전달받은 값을 최신 상태로 설정

[state로 사용자 입력 관리하기]

import { useState } from "react";
//회원가입 폼
// 1. 이름
// 2. 생년월일
// 3. 국적
// 4. 자기소개
const Register = () => {
  const [name, setName] = useState("이름");
  const [birth, setBirth] = useState("");
  const [country, setCountry] = useState("");
  const [bio, setBio] = useState("");

  const onChangeName = (e) => {
    setName(e.target.value);
  };

  const onChangeBirth = (e) => {
    setBirth(e.target.value);
  };

  const onChangeCountry = (e) => {
    setCountry(e.target.value);
  };

  const onChangeBio = (e) => {
    setName(e.target.value);
  };

  return (
    <div>
      <div>
        <input value={name} onChange={onChangeName} placeholder="이름" />
      </div>

      <div>
        <input value={birth} onChange={onChangeBirth} type="date" />
        {birth}
      </div>

      <div>
        <select value={country} onChange={onChangeCountry}>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="uk">영국</option>
        </select>
      </div>

      <div>
        <textarea value={bio} onChange={onChangeBio} />
      </div>
    </div>
  );
};

export default Register;

[state로 사용자 입력 관리하기2]
-> 비슷한 여러개의 state가 있을때는 하나의 객체값으로 묶어서 하나의 state로 통합관리

import { useState } from "react";
// 간단한 회원가입 폼
// 1. 이름
// 2. 생년월일
// 3. 국적
// 4. 자기소개

const Register = () => {
  const [input, setInput] = useState({
    name: "",
    gender: "",
    bio: "",
  });

  const onChange = (e) => {
    console.log(e.target.name + " : " + e.target.value);
    setInput({
      ...input,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <div>
      <div>
        <input
          name="name"
          value={input.name}
          onChange={onChange}
          placeholder={"이름"}
        />
      </div>

      <div>
        <input
          name="birth"
          value={input.birth}
          onChange={onChange}
          type="date"
        />
      </div>

      <div>
        <select
          name="country"
          value={input.country}
          onChange={onChange}
        >
          <option value=""></option>
          <option value="kr">한국</option>
          <option value="us">미국</option>
          <option value="uk">영국</option>
        </select>
      </div>

      <div>
        <textarea
          name="bio"
          value={input.bio}
          onChange={onChange}
        />
      </div>
    </div>
  );
};

export default Register;

[useRef로 컴포넌트의 변수 생성하기]

useRef : Reference객체를 생성
- 컴포넌트 내부의 변수로 활용 가능
* 어떤 경우에도 리렌더링을 유발하지 않음
useState : State를 생성
- 컴포넌트 내부의 변수로 활용 가능
* 값이 변경되면 컴포넌트 린렌더링!!

[React Hooks]
- 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록

useState, useRef도 React Hooks
- useState : State 기능을 낚아채오는 Hook
- useRef : Reference 기능을 낚아채오는 Hook
React Hook은?
- 이름 앞에 use가 붙음
- 함수 컴포넌트 내부에서만 호출
- 조건문, 반복문 내부에서는 호출 불가
- 나만의 hook도 제작 가능(Custom Hook)

import useInput from "../hooks/useInput";

// 3가지 hook 관련된 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
// 2. 조건부로 호출될 수는 없다
// 3. 나만의 훅(custom Hook)을 직접 만들 수 있다

const HookExam = () => {
  const [input, onChange] = useInput();
  const [input2, onChange2] = useInput();

  return (
    <div>
      <input value={input} onChange={onChange} />
      <input value={input2} onChange={onChange2} />
    </div>
  );
};

export default HookExam;

HookExam.jsx

import useInput from "../hooks/useInput";

// 3가지 hook 관련된 팁
// 1. 함수 컴포넌트, 커스텀 훅 내부에서만 호출 가능
// 2. 조건부로 호출될 수는 없다
// 3. 나만의 훅(custom Hook)을 직접 만들 수 있다

const HookExam = () => {
  const [input, onChange] = useInput();
  const [input2, onChange2] = useInput();

  return (
    <div>
      <input value={input} onChange={onChange} />
      <input value={input2} onChange={onChange2} />
    </div>
  );
};

export default HookExam;

useInput.jsx

* 출처 : 한입 크기로 잘라먹는 리액트

'React' 카테고리의 다른 글

react.js 개론 (0)	2025.05.07

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

웡's Life

react.js 입문

'React' 카테고리의 다른 글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

react.js 입문

'React' 카테고리의 다른 글

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역