24. 07. 05 TIL

useState 심화

 

1. 간단한 로그인 폼 ☆

문제

import React from 'react';

function LoginForm() {
  return (
    <div>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />
      <button>로그인</button>
    </div>
  );
}

 

답

function App() {
  const [inputEmail, setInputEmail] = useState('');
  const [inputPassword, setInputPassword] = useState('');

  const loginUser = () => {
    setInputEmail('');
    setInputPassword('');
  };
  return (
    <>
      <div>
        <input
          type="email"
          placeholder="Email"
          onChange={(e) => setInputEmail(e.target.value)}
          value={inputEmail}
        />
        <input
          type="password"
          placeholder="Password"
          onChange={(e) => setInputPassword(e.target.value)}
          value={inputPassword}
        />
        <button type="submit" onClick={loginUser}>
          로그인
        </button>
      </div>
      <div>email : {inputEmail}</div>
      <div>password: {inputPassword}</div>
    </>
  );
}

아닉 이거,,, 화면에 표시하라는 뜻인 줄 알았는데 그냥 콘솔에 표시하라는 얘기였나봄,,,

 

2. 동적 탭 컴포넌트 ☆

문제

import React from 'react';

function TabComponent() {
  const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
  const content = ['Content 1', 'Content 2', 'Content 3'];

  return (
    <div
      {tabs.map(tab => <button key={tab}>{tab}</button>)}
      <div>Content here</div>
    </div>
  );
}

 

답

function App() {
  const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
  const content = ['Content 1', 'Content 2', 'Content 3'];

  const [selecteTab, setSelecteTab] = useState(0);

  return (
    <>
      <div>
        {tabs.map((tab, index) => (
          <button key={index} onClick={() => setSelecteTab(index)}>
            {tab}
          </button>
        ))}
      </div>
      <div>{content[selecteTab]}</div>
    </>
  );
}

3. 투두리스트 필터링

문제

import React from 'react';

function TodoList() {
  const todos = [
    { id: 1, text: 'React 공부하기', completed: true },
    { id: 2, text: '운동하기', completed: false },
    { id: 3, text: '일기 쓰기', completed: false }
  ];

  return (
    <div>
      <div>
        <button>모두 보기</button>
        <button>완료된 것만 보기</button>
        <button>미완료된 것만 보기</button>
      </div>
      <ul>
        {todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
      </ul>
    </div>
  );
}

 

답

function App() {
  const todos = [
    { id: 1, text: 'React 공부하기', completed: true },
    { id: 2, text: '운동하기', completed: false },
    { id: 3, text: '일기 쓰기', completed: false },
  ];

  const [selectFilter, setSelectFilter] = useState('all');

  const filterTodos = todos.filter((todo) => {
    if (selectFilter === 'yes') {
      return todo.completed;
    }

    if (selectFilter === 'no') {
      return !todo.completed;
    }
    return true;
  });

  return (
    <div>
      <div>
        <button onClick={() => setSelectFilter('all')}>모두 보기</button>
        <button onClick={() => setSelectFilter('yes')}>완료된 것만 보기</button>
        <button onClick={() => setSelectFilter('no')}>
          미완료된 것만 보기
        </button>
      </div>
      <ul>
        {filterTodos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );

4. 색상 선택기

문제

import React from 'react';

function ColorPicker() {
  const colors = ['red', 'green', 'blue', 'yellow'];

  return (
    <div>
      {colors.map(color => (
        <button key={color} style={{ backgroundColor: color }}>
          {color}
        </button>
      ))}
      <p>Selected Color: </p>
    </div>
  );
}

 

답

  const colors = ['red', 'green', 'blue', 'yellow'];
  const [selectColor, setSelectColor] = useState('');

  return (
    <div>
      {colors.map((color) => (
        <button
          key={color}
          style={{ backgroundColor: color }}
          onClick={() => setSelectColor(color)}
        >
          {color}
        </button>
      ))}
      <p style={{ color: selectColor }}>Selected Color: {selectColor} </p>
    </div>
  );

 

5. 간단한 계산기

문제

import React from 'react';

function Calculator() {
  return (
    <div>
      <input type="number" placeholder="Number 1" />
      <input type="number" placeholder="Number 2" />
      <button>Calculate</button>
      <p>Sum: </p>
    </div>
  );
}

답

  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  const [sum, setSum] = useState(0);

  const sumFunc = () => {
    setSum(num1 + num2);
    setNum1(0);
    setNum2(0);
  };

  return (
    <div>
      <input
        type="number"
        placeholder="Number 1"
        onChange={(e) => setNum1(+e.target.value)}
        value={num1}
      />
      <input
        type="number"
        placeholder="Number 2"
        onChange={(e) => setNum2(+e.target.value)}
        value={num2}
      />
      <button onClick={sumFunc}>Calculate</button>
      <p>Sum: {sum}</p>
    </div>
  );