본 캠프

리액트 입문 1주차. (2)

Iruka913 2024. 10. 29. 20:44

다 다르단 말입니다.

 

신나는 알고리즘 풀이 시간. 

코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다.

  • 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다.
  • 한 번 사용한 카드는 다시 사용할 수 없습니다.
  • 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다.
  • 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다.

예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한 후 두 번째 카드 뭉치에서 "want"와 "to"를 사용하고 첫 번째 카드뭉치에 "drink"와 "water"를 차례대로 사용하면 원하는 순서의 단어 배열을 만들 수 있습니다.

 

문자열로 이루어진 배열 cards1, cards2와 원하는 단어 배열 goal이 매개변수로 주어질 때, cards1과 cards2에 적힌 단어들로 goal를 만들 있다면 "Yes"를, 만들 수 없다면 "No"를 return하는 solution 함수를 완성해주세요.

나의 답(풀이 실패.)

function solution(cards1, cards2, goal) {
    for (const words of goal) {
        if (words === cards1[0]) {
            cards1.shift();
        } else if (words === cards2[0]) {
            cards2.shift();
        } else {
            return "No";
        }
    }
    return "Yes";
}

 

내가 처음에 생각한 생각의 흐름은 이랬다. 

 

어떻게 한담?

 

 

근데 내가 한 가지 간과한 것이 있었다.

 

우리는 모든 경우의 수가 필요한 게 아니라, yes, no 값만 필요하다는 걸 말이다. 즉, 경우의 수를 전부 만들 생각이 아니라, goal 안에 들어가 있는 값이 올바른 지, 아닌 지만을 따져보면 됐다. 

 

즉 goal의 모든 항목들에 대해, 이것들이 올바른 위치에 존재하는가? 를 따져보는 문제라고 할 수 있었다. 

 

goal의 항목들을 순회하며, 가장 첫 번째 단어가 cards1에 있는 첫 번째 단어인가를 식별하고, 만약 맞을 시, card1의 첫 번째 요소를 제거해서 '카드를 소모한다. 

 

그리고 다시 한 번 똑같은 공정을 cards2에 적용하며 for 문을 돌리면, goal의 값이 조건에 맞는지 아닌지를 알 수 있다. 

 

이럴 때는 모든 경우의 수가 아니라, 값부터 접근해보는 것도 나쁘지 않은 시도인 듯 보인다. 

개인과제 진척도. 

 

onChange 핸들러와 formData를 이용해서 입력받은 값이 제대로 medalList라는 배열 안에 들어갈 수 있게끔 만들었다. 

 

    const onChangeHandler = (e) => {
        const { name, value } = e.target;
        setFormData((oldData) => {
            return { ...oldData, [name]: value };
        });
        console.log(formData);
    };

 

핸들러는 이렇게 구성되어 있다. 원래라면 일일히 인풋 당 하나씩 핸들러를 만들어줘야 하지만, form을 이용해 하나의 핸들러로 작동할 수 있게끔 바꿨다. 

 

인풋에 변화가 있을 때마다, 예전 데이터를 새로운 데이터로 바꾸면서, input에 할당된 이름에 밸류값이 저장되도록 했다. 

 

<fieldset style={fieldsetStyle}>
                                <legend style={legendStyle}>국가명</legend>
                                <input
                                    type="text"
                                    name="country"
                                    id="countryName"
                                    onChange={onChangeHandler}
                                    value={formData.country}
                                />
                            </fieldset>

 

이런식을 name이 country로 지정되어 있으면, 알아서 country의 name을 참고해 value를 갱신해준다. 

 

    const onSubmitForm = (e) => {
        e.preventDefault();
        setMedalList((medalLists) => {
            return [...medalLists, formData];
        });
        console.log(medalLists);
    };

 

이런 submit에 대한 코드. 

 

submit이 눌렸을 때, 새로고침을 방지하는 코드가 짧게 한 줄. 

 

그리고 medalLists를 갱신하는 코드가 들어가 있다. 

setMedalList 함수를 통해 formData가 들어간 새로운 배열을 리턴하여, 기존 배열을 갱신한다. 

 

form에 대한 건 이 정도 하면 된 듯 하다. 

 

onChangeHandler에 쓰인 [name]: value가 꽤 유용한 듯 하다.