TIL_200107

Today I learned

• 프로그래머스 알고리즘: 다른사람의 풀이
• 첫번째 프로젝트 리팩토링 (react, express)

알고리즘

//슈도코드
//각 패턴을 배열로 만들어
//answers 값 같은 점수일때 점수를 하나씩 올린다.
//result에서 가장 점수가 높은 사람을 배열로 선정하여 내보낸다.

function solution(answers) {

    const pattern = [
        [1, 2, 3, 4, 5],
        [2, 1, 2, 3, 2, 4, 2, 5],
        [3, 3, 1, 1, 2, 2, 4, 4, 5, 5]
    ]
    let score = [0,0,0];

    for(let k=0; k<3; k++){
        for(let i=0; i<answers.length; i++){
            if(pattern[k][i] === answers[i]){
                score[k]++;
            }
            pattern[k].push(pattern[k][i]);
        }
    }

    let maxNum = 0;
    let answer = score.reduce((a,c,i)=>{
        if(c>maxNum){
            maxNum = c;
            a = [i+1];
        }else if(c === maxNum){
            a.push(i+1);
        }
        return a;
    },[])

    return answer;
}

약간은 복잡하게 풀었다. 한번 검사할때마다 패턴 배열에 하나씩 숫자를 넣어서 answers의 길이가 패턴보다 길 때를 대비하고, score 배열에 숫자를 하나씩 플러스해준다. score 배열로 maxNum값에 값을 반영해주면서 maxNum보다 클때 answer 배열을 해당 currentValue로 리셋을 해주고 값이 그냥 같다면 answer 배열에 푸쉬를 해주도록 설정했다.

다른 사람의 풀이를 확인하니 filter 등과 max()값을 통해 좀 더 간단하게 풀 수도 있었을 것 같은데 너무 복잡하게 푼 것이 아쉽다. 고차함수를 활용하여 좀더 직관적으로 푸는 방법을 고민해봐야 겠다.

첫번째 프로젝트 리팩토링

• 리덕스에 액션함수 및 리듀서를 싹 갈아엎었다. 프로젝트 진행하면서 시간에 쫓겨서 투두리스트에 대한 데이터를 여기저기 덕지덕지 붙여놨더니 관리하기도 힘들고 비효율적으로 해당 값들을 업데이트해줘야해서 힘들었는데 끝나고보니 이게 왜 이렇게 됐을까 싶은 생각이 들어서 그냥 todo 전체 데이터 값을 날려주고 project 리듀서에서 투두리스트를 원소스로 관리하면서 뿌려주도록 바꿔줬다. 이렇게하니까 리덕스에 지저분한 데이터들이 많이 사라져서 보기 편해서 좋다.

• 다만 코드 리팩토링하다가 맞닥뜨린 문제는 리덕스에 dispatch 를 통해서 값을 업데이트해줘도 컴포넌트에서 리렌더링이되지 않아서 체크박스가 체크 및 해제가 되지 않는 문제가 발생했다. 분명 mapStateToProps로 props연결을 해주어서 당연히 렌더링이 자동적으로 잘 일어날 것이라고 예측을 했는데... 여러가지 삽질하고 구글링해보면서 알아본 결과 내가 부모 컴포넌트에 mapStateToProps를 해주고 해당 값을 자식 컴포넌트에 props로 전달을 해줬는데 아마 이게 문제였던 것 같다. 리덕스값이 바뀌어도 자식 컴포넌트에선 해당 값에 대한 인식을 못하는? 문제가 발생하여서 스택오버플로우와 블로깅글을 참고하여 자식 컴포넌트에서 props값을 state로 마운트 때와 업데이트때 각각 setState해주는 방식으로 해줬더니 리렌더링이 정상적으로 잘 이뤄졌다. 결론은 부모가 보내준 props가 변경된다고 해서 자식 컴포넌트가 자동적으로 리렌더링을 진행하지 않는다는 것이다. 이는 리액트 라이프사이클을 참고해보면 더 명확하게 알 수 있다. props가 새로 전달되거나 할때는 업데이트가 일어나지만 그 이후 변경에 대해서는 자동적으로 리렌더링이 일어나지 않기 때문에 이럴 경우엔 자식 컴포넌트에서 mapStateToProps를 이용하거나 forceUpdate(), 혹은 setState를 통해서 리렌더링 조건을 맞춰줘야 한다.