LG CNS 부트캠프 학습일지 10일차

학습 내용

• 블로그 토이프로젝트
• Context API

블로그 토이프로젝트

댓글을 수정하는 기능을 추가했다. 말로는 간단한데, 생각보다는 어려웠다. 부모로에서 자식으로 한 방향으로만 자료가 전달된다는 것을 배웠다. 이해하기 쉬운 코드를 작성하고 있는지 의문이 드는 부분이 있었다.

const ParentComponent = () => {
	const handleButtonClick = () => {
		...
	}
	
	return (
		<>
			<ChildComponent onButtonClick={handleButtonClick}></ChildComponent>
		</>
	);
}

const ChildComponent = (props) => {
	return (
		<>
			<Button onClick={props.onButtonClick}></Button>
		</>
	);
}

실제로 버튼을 가지고 있는 곳은 ChildComponent이다. 하지만 그 버튼이 눌리면 어떻게 행동할지는 ParentComponent에서 정의한다. ParentComponent가 ChildComponent가 어떻게 구현되어 있는지를 알고 있어야 한다. 다른 컴포넌트가 어떻게 구현되어 있는지 알고 있어야 한다는 점이 이상하다고 생각했다. 물론 내가 틀렸을 수도 있다.

프로젝트가 커지기 시작하니까 필드 이름과 메소드 이름이 헷갈리기 시작했다. 변수 이름을 잘 짓는게 중요하다고 느꼈다.

Context API

데이터가 한 방향으로만 전달되기 때문에 약간의 어려움이 발생한다. Props가 최종 자식 컴포넌트에게 너무 깊게 전달된다는 것이다.

이 때 사용하면 좋은 것이 Context API이다.

const PersonContext = CreateContext(null);

<PersonContext.Provider value=>
	<h2>Name: {name}</h2>
	<h2>Age: {age}</h2>
</PersonContext.Provider>

const MyComponent = () => {
	const person = useContext(PersonContext);
	...
}

내일 더 자세하게 배우지 않을까 싶다. 아니면 곧 교재를 읽어보면서 스스로 배워도 될 것이다. 아무튼 Context API를 적절하게 사용하면 Props 자식 컴포넌트에 전달하는 소요를 줄이고 코드를 조금 더 가독성있게 작성할 수 있을 것이다.

다만 한 가지 걸리는 점이 있다. Context를 사용하는 것은 사실상 전역변수를 사용하는 것과 같다. 다른 언어를 배울 때 들었던 전역변수의 악독함(?)에 대해서 배웠는데, Context를 무분별하게 사용하면 문제가 발생하지 않을까 걱정했다.

결론

학습일지를 작성하면서 오늘 배운 것을 말로 설명하기가 쉽지 않다고 생각했다. 블로그 토이프로젝트를 따라가면서 axios 라이브러리 사용법을 익혔다. 생각보다는 어렵지 않았다. TypeScript에도 꽤 익숙해졌다고 자부한다.