24. 06. 28 TIL

useState 기초 과제 풀기

 

1. 카운터 만들기

문제

import React from 'react';

function Counter() {
  return (
    <div>
      <p>Count: 0</p>
      <button>Increment</button>
    </div>
  );
}

 

쓴 코드

 

import { useState } from 'react';

const App = () => {
  const [num, setNum] = useState(0);
  return (
    <div>
      <p>{`count: ${num}`}</p>
      <button onClick={() => setNum(num + 1)}>Increment</button>
    </div>
  );
};

export default App;

2. 텍스트 입력 상태 관리

문제

import React from 'react';

function TextInput() {
  return (
    <div>
      <input type="text" />
      <p>Input: </p>
    </div>
  );
}

 

쓴 코드

const App = () => {
  const [inputValue, setInputValue] = useState('');

  const inputText = (e) => {
    setInputValue(e.target.value);
  };
  return (
    <div>
      <input type="text" onChange={inputText} />
      <p>{`input: ${inputValue}`} </p>
    </div>
  );
};

3. 토글스위치

문제

import React from 'react';

function ToggleSwitch() {
  return (
    <div>
      <p>Status: OFF</p>
      <button>Toggle</button>
    </div>
  );
}

 

쓴 코드

const App = () => {
  const [toggle, setToggle] = useState(false);

  return (
    <div>
      <p>{`status: ${toggle ? 'ON' : 'OFF'}`}</p>
      <button onClick={() => setToggle(!toggle)}>Toggle</button>
    </div>
  );
};

 

4. 항목 목록 관리

문제

import React from 'react';

function ItemList() {
  return (
    <div>
      <input type="text" />
      <button>Add Item</button>
      <ul>
        {/* 항목 목록이 표시될 곳 */}
      </ul>
    </div>
  );
}

 

쓴 코드 ☆

const App = () => {
  const [inputText, setInputText] = useState('');
  const [inputList, setInputList] = useState([]);

  const addInput = () => {
    setInputList([...inputList, inputText]);
    setInputText('');
  };

  return (
    <div>
      <input
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
      />
      <button onClick={addInput}>Add Item</button>
      <ul>
        {inputList.map((i, index) => {
          return <li key={index}>{i}</li>;
        })}
      </ul>
    </div>
  );
};

5. 테마 색상 변경

문제

import React from 'react';

function ThemeChanger() {
  return (
    <div style={{ padding: '20px' }}>
      <button>Light Blue</button>
      <button>Light Green</button>
      <button>Light Pink</button>
    </div>
  );
}

 

쓴 코드

  const [backColor, setBackColor] = useState('white');

  return (
    <div style={{ padding: '20px', backgroundColor: backColor }}>
      <button onClick={() => setBackColor('lightblue')}>Light Blue</button>
      <button onClick={() => setBackColor('lightgreen')}>Light Green</button>
      <button onClick={() => setBackColor('lightpink')}>Light Pink</button>
    </div>
  );
};