-
관심사 / 책임
- 1 - 리듀서는 순수하게 해당 액션이 있으면 state를 변경해주고, 없으면 기존 state를 반환하는 함수이다. 그렇기 때문에 리듀서에서 throw error를 하는 것은 리듀서의 관심사가 아니다.
- 2 - 네이밍 관련 피드백이다. props의 네이밍을 정할 때, 사용자 쪽이 아닌 사용처에 의해 네이밍이 되어야 한다. 왜냐하면 자식 컴포넌트로 갈 수록 재사용성이 높아지고, 추상화가 더 이루어지기 때문이다. 그래서 자식 컴포넌트의 props에 구체적인 네이밍이 되어 있다면 재사용을 못하게 된다. 또한 이렇게 prop drilling이 발생할 때, 네이밍을 모두 동일하게 유지하면 부모의 함수 네이밍이 바꼈을 때 모든 props를 따라가면서 이름을 바꿔줘야 하는 불상사가 일어나게 될 것이다.
- 3 - 페이지에서 사용하는 컴포넌트가 비슷하다고 해서 하나의 컴포넌트로 묶어서 사용하려고 하지 말아라. 코드도 길어지고, 의미도 불명확해지며 재사용도 불가능하다. 그냥 페이지를 나누고, 공통으로 사용되는 컴포넌트를 추출하는 것이 더 좋다.
-
컴포넌트
-
커스텀 훅
- 1 - 커스텀 훅에는 JSX가 들어있으면 좋지 않다. 이에 관해서 많은 생각을 해봤는데, 커스텀 훅에 JSX가 있으면 커스텀 훅이 아니라 그저 컴포넌트이기 때문인 것 같다.
-
기타
-
리덕스의 성능이 좋을까? - 리덕스가 context api보다 규모가 큰 프로젝트에 많이 사용하는 것 같은데, 성능이 더 좋아서 사용하는 것일까? 성능이 중요할 때 리덕스를 사용하라는 글은 없다. 있어도 잘못된 글이라고 한다. 단지 리덕스를 많은 기업에서 사용하는 이유는 코드가 일관되기 때문이다. 어떠한 개발자가 개발을 하더라도 액션 타입, 액션 함수, 리듀서를 만들어야 하고, 코드가 비슷해질 수 밖에 없다. 그로 인해 규모가 큰 프로젝트에서는 일관성이 중요하고, 그것 때문에 리덕스를 사용하는 것이지 리덕스의 성능 때문에 사용하는 것은 아니다.
context api와 리덕스를 많이 비교하는데, 이 둘의 차이는 직접 사용해보면서 느끼는 것이 가장 좋을 것 같다. 어떠한 글을 보더라도 글쓴이의 주관이 들어가기 때문이다. -
if vs && - if문과 &&연산자의 차이점이 무엇일까? if문은 문이기 때문에 값을 할당할 때 사용할 수 없다. 하지만 &&연산자는 표현식이기 때문에 값을 할당할 수 있다. 또한, if문에서 조건식을 만족하지 않으면 실행을 하지 않지만 &&연산자는 값을 항상 평가하게 된다. if문은 조건식을 사용할 수도 있기 때문에 가독성도 더 좋다.(변수를 활용할 수 있기 때문)
따라서 값을 평가해야 하는 경우에는 &&를 사용하고, 아닌 경우에는 if를 사용하자.
-
가독성 - 코드를 구현할 땐 가독성을 신경쓰되 바뀔 일이 많지 않은 코드는 한 눈에 보이도록 코드를 짜는 것이 더 좋을 수도 있다.
-
함수의 역할 및 비용 - 함수가 너무 길어진다면 함수가 너무 많은 일을 하고 있는지 살펴볼 필요가 있다. 함수가 많다면 컴포넌트가 너무 많은 책임을 지고 있는지를 확인해 볼 필요가 있으며, 컴포넌트 내에 선언한 함수가 리렌더링 시 계속 만들어지고 사라지고 하는 것은 엄청나게 작은 비용이기 때문에 고려할 사항이 아니다.
-
고차함수 사용 - 이벤트리스너와 같은 고차 함수에는 콜백 함수를 전달할 때, 해당 콜백 함수가 실행된다. 이 때문에 따로 함수를 정의해주는 방법을 사용하곤 하는데, 고차 함수를 활용해 함수를 만들게 되면 이벤트 리스너 내에서도 인자를 바로 넘겨줄 수 있다.
-
const higherOrderFunction = (param) => () => console.log(param);
<Component onClick={higherOrderFunction('Good')} />