제어의 역전(Inversion of Control) 이라는 말이 조금 어렵게 느껴진다.
라이브러리 vs 프레임워크 차이에 대해서 공부할때도 잠깐 공부했었지만, 이 참에 제대로 다시 정리 해보려고 한다.
라이브러리 vs 프레임워크
둘의 차이는?
프레임워크는 라이브러리를 포함한다. 프레임워크 위에 개발자가 작성한 애플리케이션 코드가 올라가고, 이 코드에서 라이브러리를 호출한다.
제어의 흐름이 어디에 있는가로 설명가능하다.
프레임워크는 제어의 역전 개념이 적용된다. 제어흐름을 프레임워크에 넘겨 틀안에서 수동적으로 동작.
라이브러리는 이러한 제어의 흐름이 개발자에게 있다. 개발자에게 전적으로 제어 흐름이 있으며 능동적으로 라이브러리를 호출하여 사용한다.
프론트엔드에서 IOC 적용예시
늘 그렇듯, 용어가 어려울 뿐이지 우리가 사용해봤던 여러 메서드나 기타 코드에서 제어의 역전 개념이 쓰인적이 있을거라고 생각했다.
IOC는 일반적으로 프레임워크에 의해 적용되는 말이지만, 개발자가 직접 해당 원리를 적용하여 코드를 작성할 수도 있다.
코드의 유연성과 재사용성이 증가하며 애플리케이션의 확장과 유지보수가 용이해진다.
--> 코드를 작성하고 그것을 실행하는것은 호출한 모듈이 실행하는 셈.
Render props 패턴
제어의 역전의 한 예시이다.
const Counter = (props) => {
const [count, setCount] = useState(0);
return (
<div onClick={() => setCount((prev) => prev + 1)}>
props.children
</div>
);
};Counter 컴포넌트의 count를 children에 어떻게 전달할 수 있나.
count가 업데이트 될때마다 children 또한 업데이트 해보자.
const Counter = (props) => {
const [count, setCount] = useState(0);
return (
<div onClick={() => setCount((prev) => prev + 1)}>
{props.children(count)}
</div>
);
};
function App() {
const { author } = {
author: "lee",
};
return (
<div className='App'>
<Counter>
{(count) => {
return (
<>
<div>작성자: {author}</div>
<div>{count}</div>
</>
);
}}
</Counter>
</div>
);
}-> Counter 컴포넌트는 count 상태를 관리하고, 해당 상태를 자식 컴포넌트로 전달하는 기능을 함.
자식 컴포넌트는 props.children으로 전달받은 함수를 호출하면서 count 값을 인자로 넘겨준다.
DI(의존성 주입)
리액트에서 컴포넌트를 다룰때 많이 사용되는 컴포넌트 주입이 있다.
부모 컴포넌트가 자식 컴포넌트의 동작을 제어하거나 데이터를 주입하면서, 자식 컴포넌트는 이에 의존하여 동작하는 구조를 만들 수 있다.
