[Java 풀스택 과정 강의] 1월 26일

※ TIL와는 별개로 적는 개인 개발 일지라서 말은 좀 편하게하는 페이지입니다.
일지이기 때문에 일기의 성격이 더 강합니다.

 

 

이어서 React. 1월 26일에는 useState 사용에 대해서 배웠다. 그리고 그에 따른 onChange 메서드도 사용했다. EVENT도 있었다… 그리고 단위 시험을 봤는데 100점.

 

useState

useState는 React의 다른 특징 중 하나다. 사용하기 위해서는 import {useState} from 'react'; 라는 문장을 넣어야 한다. useState를 통해 상태를 관리하고, 그 상태를 자식 컴포넌트에 props로 전달하거나 화면에 반영할 수 있다.

기본적인 샘플은 다음과 같다.

 

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
    </div>
  );
}

 

메서드 사용에서 useState를 수정하는 것을 다루겠지만, 기본적으로 이렇다 보면 된다. const [값, 값을 바꾸는 함수] = useState(초기값); 으로 지정한다. 이후 onChange나 onClick 메서드를 사용한다. 카멜 표기법을 사용하기 때문에, JS에서 사용했던 각종 메서드는 전부 카멜형태로 수정되어 사용된다.

 

메서드 사용

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(0)}>초기화</button>
    </div>
  );
}

 

이런식으로 화살표 함수와 함께 사용한다. 물론 여기에 함수와 매개변수를 넣어서 props 형태로 넘기는 것도 가능하다.

 

부모 컴포넌트에서

function App() {
  const [mode, setMode] = useState('web');

  const goHome = () => setMode('web');

  return (
    <div>
      <Header onChangeMode={goHome} />
      <p>{mode}</p>
    </div>
  );
}

 

 

자식 컴포넌트에서

function Header(props) {
  return (
    <h1 onClick={props.onChangeMode}>WEB</h1>
  );
}

 

이렇게 할 경우 자식에서 클릭하면 부모 메서드를 실행할 수 있다.

 

 

Event

import React from 'react';

function Example() {
  const handleClick = (e) => {
    e.preventDefault();
    console.log('클릭됨', e.target);
  };

  return (
    <a href="#" onClick={handleClick}>
      클릭
    </a>
  );
}

export default Example;

 

기존 JS에서 사용하는 event와 크게 차이는 없다. 동일하게 처리하면 된다.