10/7[TIL]React (2) & 모듈

React

React의 기본 원칙에는 단방향 데이터 흐름이 있는데 이는 데이터는 위에서 아래로 단방향으로 흐른다는 것을 의미한다.

 

우리가 배웠던 props를 이용해서 데이터를 위에서 아래로 전달해 줄 수 있다.

 

컴포넌트 간의 상호작용을 보자면 같은 레벨(형제)의 컴포넌트끼리는 서로 상호작용을 할 수 없다.

그렇기에 같은 레벨(형제) 컴포넌트끼리 상태를 공유하기 위해서는 공통의 부모에서 상태를 다뤄야 한다.

그렇게 해야 하단 컴포넌트에 렌더링이 가능해진다.

 

그렇다면 어떻게 자식 컴포넌트는 부모의 상태를 어떻게 변화시킬 수 있을까?

 

기존의 최상위 컴포넌트가 자식 컴포넌트의 내용을 변경할 때에는 최상위 컴포넌트의 tochild 값은 먼저 자식 컴포넌트에게 props로 전달되고 그 값은 그 자식의 자식 컴포넌트에게 또다시 props로 전달되고 그렇게 계속 진행되어 마지막 자식에게 전달되는 것이다.

 

이의 반대 경우인 자식 컴포넌트가 최상위 컴포넌트를 내용을 변경할 때에는 최상위 컴포넌트에 있는 state 값을 변경하는 함수를 만들고 그 함수를 prop로 하위로 전달하여 하위 컴포넌트에 생성된 버튼을 클릭하면 그 함수를 실행하게 하여 상위 컴포넌트의 state를 변경하게 하면 될 것이다.

 

 

모듈(module)

모듈은 코드에서 특정 기능을 하는 부분을 따로 떼어내서 함수로 만들어 놓은 것을 말한다.

내부에서 바로 사용 가능하며 따로 떼어 놓아 나중에 불러와서 사용도 가능하다.

 

모듈은 3가지의 이점(특징)을 가지는데

 

재사용성

필요한 부분마다 가져다 쓰는 이점이다.

 

유지보수

고쳐야 할 경우 전제적인 부분이 아닌 모듈만 고치면 된다.

 

범용적 사용

다른 사람들도 내가 만든 코드를 사용할 수 있다.

그리고 다른 사람들이 만든 코드들도 내가 사용할 수 있다는 반대로도 경우도 가능하다.

 

모듈을 사용하기 좋은 예로는 순서가 중요한 것, 코딩이 방대해져서 스코프 관리가 힘들 때, 코드가 복잡해질 때를 들 수 있다 모듈을 사용하면 보다 직관적이고 깔끔하게 정리를 할 수 있다는 이점이 있다.

 

해결책 중 하나인 common js는 js의 범용적 사용을 위한 모듈 시스템 구축의 선두주자이다

 

모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다 이는 스코프를 가리키고

모듈 정의는 전역 객체인 exports 객체를 이용한다.

모듈 사용은 require 함수 이용한다.

이렇게 되면 의존성 문제 해결이 가능하다.

 

그리고 ES6로 넘어오면서 내장된 모듈 시스템을 사용하게 되었다.

import / export이다. 사전적인 의미 그대로 import 가져올 때 export는 내보낼 때 사용한다.

 

 

Bundler

필요한 파일들을 묶어서 하나의 파일로 만들어서 HTML에서 <script> 태그로 로딩될 수 있도록 만들어 준다.

의존성이 있는 여러 가지 js 파일들을 Bundler가 하나로 만들어 준다고 생각하면 된다.

그렇게 되면 소스라고 하는 프로퍼티로 불러와서 사용할 수 있게 된다. 이로써 의존성을 해결하게 된다.

 

모듈화를 할수록 할 파일들이 늘어난다. 하지만 Bundler를 사용한다면 시간 지연이 사라지고 효율적으로 파일을 받아 사용할 수 있고 속도가 빨라지는 등 이점을 확인할 수 있다.