리액트 숙련. (7)

신나는 알고리즘 풀이 시간

 

나의 답

function solution(lottos, win_nums) {

    const answer = [];

    let rightNum = 0;

    let countZero = 0;

    for (let i = 0; i < lottos.length; i++) {

        if (lottos[i] === 0) countZero++;

        if (win_nums.includes(lottos[i])) rightNum++;

    }

    const helper = (number) => {

        switch (number) {

            case 6:

                answer.push(1);

                break;

            case 5:

                answer.push(2);

                break;

            case 4:

                answer.push(3);

                break;

            case 3:

                answer.push(4);

                break;

            case 2:

                answer.push(5);

                break;

            default:

                answer.push(6);

                break;

        }

    };

    helper(countZero + rightNum);

    helper(rightNum);

    return answer;

}

 

문제는 쉽게 풀었다. switch문을 두 번씩이나 쓰는 게 너무 귀찮아서, 그냥 따로 헬퍼 함수를 만들어서 작업해주었다.

 

결국 0이 들어가있을 때 최저 순위와 최고 순위를 맞추라는 건, 0이 전부 맞았을 때와 0이 전부 틀렸을 때 두 가지이므로, 수식을 이렇게 사용하였다. 

비제어 컴포넌트

보통, 제어 컴포넌트로 하는 걸 리액트에선 권장한다고 했었지만 요즘엔 그런 것도 아닌 듯 하다.

 

더 편한 방법이 있다고 한다. 

import { useState } from "react";

function TodoListWithFormData() {

    const [todos, setTodos] = useState([]);

    const handleAddTodo = (e) => {

        e.preventDefault();

        const formData = new FormData(e.target);

        const newTodo = formData.get("todo").trim(); // 'todo' 필드 값 가져오기

        if (newTodo) {

            setTodos([...todos, newTodo]); // 새로운 항목 추가

            e.target.reset(); // 입력 필드 초기화

        }

    };

    return (

        <div>

            <h2>Todo List</h2>

            <form onSubmit={handleAddTodo}>

                <input type="text" name="todo" placeholder="Enter a task" />

                <button type="submit">Add</button>

            </form>

            <ul>

                {todos.map((todo, index) => (

                    <li key={index}>{todo}</li>

                ))}

            </ul>

        </div>

    );

}

export default TodoListWithFormData;

 

이렇게 하면 input에다가 일일히 onChangeHandler를 달아주지 않아도 된다. 또한, 리렌더링도 그만큼 적어지기 때문에, 페이지에 걸리는 과부하 역시 줄어든다. 

 

나 혼자서 crud를 만들어볼 때, 꽤나 유용하게 써 볼 수 있을 듯 하다.