[취업준비일지] - 102

1.React에서 배열에 map 메서드를 사용할 때
key를 사용하지 않으면 비효율적이고
중복된 key를 사용하면 DOM에서 문제가 발생하는 것 까지는 알았지만
key가 정확하게 하는 일이 무엇인지 궁금했다.

어차피 VirtualDOM에서 일을 처리하는데
왜 우리는 굳이 key를 추가하기를 권장받을까?

가장 큰 이유는 효율성과 안정성이었다.

key를 사용하지 않을 경우 
domTree에서는 배열을 순차적으로 비교하며
배열의 내용 중 하나라도 순서가 일치하지 않으면 전체를 변경해버린다.
예를 들어 [1,2,3,4,5,6,7]이 [1,2,3,4,5,6,8]로 바뀐 경우에도
7개의 값을 모두 비교한 다음 배열의 변경을 인식하고
배열을 다시 렌더링해준다.

하지만 key를 사용한다면 key-value의 매칭을 통해 비교하며
[1,2,3,4,5,6] 까지의 부분은 리렌더링하지 않고
간단하게 7을 8로 변경하는 작업만으로 끝내줄 수 있다.

이런 빠른 리렌더링을 일반적인 개인 프로젝트에서 체감하기 힘들지만
무한스크롤 등 많은 데이터를 배열로 mapping하는 경우
변경된 것 하나만 리렌더링 하는 것과
전체를 리렌더링 하는 것은 엄청난 차이를 보일 것이다.

또한 key라는 고유성을 부여해 안정성 또한 부여할 수 있다고 한다.

 

 

 

 

 

(1).백준 1929 소수 구하기는 범위 소수를 모두 출력하는 문제였다.
특정 숫자의 소수 여부를 체크하는 것이 아니기 때문에 
당연히 에라토스테네스의 체가 제일 효율적이었다.

기존에 에라토스테네스의 체를 사용해서 할 때는 
1~100까지를 체크해야 한다고 할 경우 100을 제외한 2~99까지 진행했었다.
최소 소수인 2부터 n-1까지를 진행했던 이유는
n은 이전에 판단이 되기 때문에 소수인지 판별이 이전에 나서 확인을 안했는데

이번 기회에 에라토스테네스의 체의 정확한 이름을 찾기 위해 검색해보니
여태 시간복잡도상 멍청한 계산을 하고 있다는 사실을 알 수 있었다.

예를 들어 97이라는 소수를 판별하기 위해서는
당연히 96까지 체크할 필요가 없다.
96의 경우 48로 나누어진다는 부분이 중요한 것이 아니라
그 이전에 2로 해결이 된다는 부분이 중요했는데

기존 소수 체크를 위해 Math.sqrt를 사용하듯
제곱근보다 큰 숫자로는 체크할 필요가 없는 것이었다.
Math.ceil(Math.sqrt(endNum))를 사용해 범위를 대폭 줄이고
문제가 잘 해결되는 것을 볼 수 있었다.

1에서 100까지라고 가정할 때 100까지가 아닌 10까지만 체크하면 되기 때문에
제곱근까지만 체크할 경우 log₂N만큼 단축되는 것을 볼 수 있다.

const [startNum, endNum] = `3 100`.split(' ').map(Number)
let primeArr = [0,0]

for(let i = 2 ; i <= endNum ; i++){
    if(i < startNum){
        primeArr.push(0)
    }
    else{
        primeArr.push(i)
    }
}
for(let i = 2 ; i <= Math.ceil(Math.sqrt(endNum)) ; i++){
    for(let j = 2 ; j*i <= endNum ; j++){
        primeArr[i*j] = 0
    }
}


console.log(primeArr.filter(el => el).join('\n'))