[취업준비일지] - 92

1.useState, useEffect가 클로저를 사용해 만들어졌다는 사실은 알았지만
index를 사용해 순차적으로 관리되는지는 몰랐는데 신기했다.

원리를 알고나니 간단했는데 
일차적으로 useState와 useEffect를 담은 함수를 만들고
그 하위에 useState와 useEffect를 따로 생성한다.

이를 통해 각자 클로저를 통해 분리되지만
상위에는 공통된 상태값들을 hooks에 담을 수 있게 된다.

이런 상태에서 다시 useState 함수 내부에서는
초기값을 할당해준 다음 외부스코프에 저장된 index를 증가시켜
다음 state로 턴을 넘겨준다.

setState를 통해 값을 변경할 경우에는
해당 index의 hooks의 값(해당 state의 값)을 변경해준 다음
index를 0으로 초기화한 다음 랜더링을 진행해
다시 state들을 불러오게 만든다.


2.every와 some은 forEach처럼 한바퀴를 순회하지만
filter처럼 해당하는 내용이 있는지를 체크한 다음 
모두가 해당할 경우 true로 처리되는 every
하나라도 해당할 경우 true로 처리되는 some로 구분되기 때문에
조건을 체크할 때 사용한다.

그렇기 때문에 해당 내용이 있는지 여부를 
0이 아닐 경우 true로 인지하게 사용하는 것 보다는
some을 사용해 바로 true 여부를 구별하는 것이 더 가독성이 좋은 것 같다.

let arr = [1,2,3,4,5,6,7]
console.log(arr.some(el => el === 5))
// true
console.log(arr.filter(el => el === 5).length)
// 1

 

3.true || xx || yy인 경우 xx와 yy자체가 실행되지 않기 때문에
함수를 || 또는 &&와 함께 사용할 경우
조건에 따라 분기되며 뒤에 배치된 함수가 전에 실행된 결과값에 따라
실행되지 않을 수 있기 때문에 경우에 따라 고려할만하다.

이런 방식은 리액트에서도 종종 볼 수 있었는데
아래와 같이 위 내용 대신 아래와 같이 사용할 수 있다.

{"조건식" ? <div>"대충 내용"</div> : null}
{"조건식" && <div>"대충 내용"</div>}

 

하지만 if문 등의 내에서 사용하는 것은 오늘 처음 봤는데
if(functionA() && functionB() && functionC()){} 형태의 경우
A가 true인 경우 B가 시행되기 때문에
예를 들어 string, number, arr 타입을 처리하는 경우
A에서 string을 처리하고 B에서 number를 처리한다면
C에서는 배열만 남기 때문에 배열처리함수를 넣어도 
Cannot read properties of undefined (reading '배열처리메서드')가 뜨지 않는다.

반대로 ||를 사용해서 진행할 경우
앞 함수가 만족하면 그대로 중단되기 때문에 아래와 같은 처리가 이루어진다.

//어디까지 처리하는지를 console로 찍어주며 그대로 반환하는 함수

const printReturn = (trueOrFalse) =>{
    console.log(`Print ${trueOrFalse}`)
    return trueOrFalse
}
console.log(printReturn(0)||printReturn(0)||printReturn(5))
// Print 0
// Print 0
// Print 5
// 5

console.log(printReturn(1)||printReturn(0)||printReturn(3))
// Print 1
// 1

console.log(printReturn(0)||printReturn(4)||printReturn(3))
// Print 0
// Print 4
// 4

console.log(printReturn(1)&&printReturn(2)&&printReturn(3))
// Print 1
// Print 2
// Print 3
// 3

console.log(printReturn(0)&&printReturn(2)&&printReturn(3))
// Print 0
// 0

console.log(printReturn(4)&&printReturn(0)&&printReturn(4))
// Print 4
// Print 0
// 0

(1).백준 20977 JOI Sort는 J, O, I의 순서로 재정렬하는 문제였다.
알파벳 순서와는 다르기 때문에 일반적 정렬을 할 수는 없었고
객체에 숫자를 부여해 sort를 할 수 있었지만 객체에 담아 제출했다.

const input = `10
OIJJJIOIOI`.split('\n')

let counting = {J:0, O:0, I:0}
for(let i = 0 ; i < input[1].length ; i++){
    if(input[1][i] === "J") counting["J"]++
    else if(input[1][i] === "O") counting["O"]++
    else counting["I"]++
}

console.log(`${"J".repeat(counting.J)}${"O".repeat(counting.O)}${"I".repeat(counting.I)}`)

 

말이 나온 김에 이미 푼 문제지만 객체에 담아서도 해결했다.
각 글자의 우선순위 또는 순번을 객체에 담은 다음
sort에서 비교할 때 그 수치를 불러오는 방식이다.

let input = `10
OIJJJIOIOI`.split('\n')[1].split('')

let sortJOI = { J:1, O:2, I:3}

input.sort((a,b) => (sortJOI[a]-sortJOI[b]))

console.log(input)