Null 전파를 막자

 

함수나 react의 props로 가끔 피치 못할 사정으로 nullable한 값을 내려보낼 때가 있다.

 

function example(a?: number, b?:number) {
	if(isNil(a) || isNil(b)) ... // null 방어 코드
	.. 
}

 

null값이면 해당 parameter를 사용 못하니 Nullish coalescing operator(??) 나 Optional chaining(?.)를 사용해서 방어 로직을 짜게 되는데,

그러다보면 nullable한 변수를 쓰는 곳마다 방어로직을 넣게 되고 다른 함수의 정보가 넘어오다보니  코드의 유연성과 안정성이 떨어지는 문제가 발생한다.

 

그래서 Null 전파를 막지는 못해도 피하는 방법에 대해 써보려고 한다.

 

실제 예시

 

지금 테이블 라이브러리를 만들고 있는데,

보통 라이브러리들에는 option을 넣어서 필요한 기능을 추가하거나 뺄 수 있다.

 

function App() {

	return <Table data={data} columns={columns} option={{ isServerSide: true }}/> // Table 예시 코드 
}

 

당연히 테이블 라이브러리를 만들때도 해당 기능을 구현하려고 했는데 option props에는 유저가 필요한 정보만 명시하고 나머지는 default 값으로 실행되야 하므로 nullable한 값이 들어올 수 밖에 없을것이다.

 

그리고 option으로 주어진 값은 테이블 내부에서 여러 곳에 전파되어 option이 지정되었다면 해당 옵션을 지원하는 로직을 실행시킬것이고, 아니라면 기본 default 로직이 실행될것이다.

 

그럼 option의 값이 nullable이니까 option이 전파된 곳마다 null check를 해야할까?

물론 그럴수도 있지만, 그럼 너무 힘들어지고 디버깅과 코드 수정이 어려워질 것이다. 

 

만약 홍수가 난다면 댐이 넘치기 전에 댐에서 조치를 취하는것이 가장 쉬운 방법일 것이다.

마찬가지로 Nullable한 값이 넘어온다면, 그 전에 Nullable한 값이 아니도록 조치를 취하는것이 가장 쉬운 방법일 것이다.

 

Nullable Object -> (전처리) -> Not Nullable Object -> 다른 모듈로 전파

 

그 해답은, props나 parameter로 넘어오는 Nullable paramter를 바로 전처리해서 Nullable하지 않는 object로 만들어 사용하면 된다.

보통 default Parameter를 주입하는 방법을 많이 쓰고, 혹은 Null object pattern(https://johngrib.github.io/wiki/pattern/null-object/)을 이용한다. 

 

Null을 넘길 수 밖에 없어서 Null을 넘긴건데 이게 뭔소리냐..? 싶을수도 있긴 하지만 default Parameter나 Null Object 같은 패턴을 이용해서 null 체크를 하는 상황 자체를 회피하는 방법이다. 

 

 

https://github.com/vercel/swr/blob/main/_internal/src/utils/resolve-args.ts#L8

 

 

테이블 라이브러리의 케이스에서는 Option이 넘어올때 중간에서 Nullable한 값이 있다면 default 값으로 overwrite하면 됐었다. 실제로 swr 라이브러리도 config로 넘긴 값을 defaultConfig과 merge해서 overwriting 하는 방법을 쓰고 있다. (17번째 줄)

 

옛날에 부스트캠프를 했을때 모든 코드에 null체크를 하는 게 안좋다는 피드백을 멘토님께 받았었는데

그 당시에는 왜 그런가 잘 몰랐었는데 오늘 날 와서 이해하게 된 것 같다..!

 

reference

 

SWR

https://github.com/vercel/swr/blob/main/_internal/src/utils/resolve-args.ts#L8

 

https://jojoldu.tistory.com/721

3. 좋은 함수 만들기 - Null 을 다루는 방법