문몰래의 코딩일지

코딩을 공부하다보면 수많은 코드들에서 Import, export가 정말 많이 나온다. 이것들이 무엇이고 어떻게 활용할 수 있는지 정리해보자

Import

한 마디로 가져온다는 거다. 무엇을? export 한 것을.

Export

한 마디로 내보낸다는 거다. 무엇을? 내가 내보내고 싶은 것을.

코드로 간단하게 보자

//Math.js
export default function add(a, b) {
  return a + b;
}

Math.js에서 내가 add라는 함수를 다른 곳에서 사용하고 싶을 때 이렇게 export를 사용하면 된다. 여기서 default가 붙어 있는데 이것은 이 파일에서 기본으로 export하고 싶은 값을 사용하고 싶을 때 사용한다. export default는 파일 당 하나의 값만 보낼 수 있다. 

자 그러면 이 내보낸 것을 다른 파일에서 써야겠지?

//main.js
import sum from './math.js';

console.log(sum(4, 5)); // 9

export한 값을 Import를 사용해서 가져와서 사용하면 된다. 

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

Export는 여러개 할 수 있다.

import { add, subtract } from './math.js';

console.log(add(10, 5));     // 15
console.log(subtract(10, 5)); // 5

Import도 중괄호를 활용해서 여러 개를 한 번에 받을 수 있다.

만약 이름을 바꾸고 싶다면??

import { add as plus, subtract as minus } from './math.js';

console.log(plus(10, 5));  // 15
console.log(minus(10, 5)); // 5

이런 식으로 바꾸면 된다. 

또 Import를 활용해서 모든 내보낸 값을 한 번에 가져오는 방법도 있다. 

import * as math from './math.js';

console.log(math.add(10, 5));     // 15
console.log(math.subtract(10, 5)); // 5

모든 값을 가져와서 math라고 이름을 붙인디 객체를 사용하듯이 math.함수( ) 이런 식으로 활용이 가능하다.

React를 공부하다보면

import React from 'react';

export default function Button({ label }) {
  return <button>{label}</button>;
}

import React from 'react';
import Button from './components/Button';

function App() {
  return <Button label="Click me!" />;
}

export default App;

이런 식의 코드를 정말 많이 보게 된다. React 뿐만 아니라 Java, Spring 등 많이 언어와 프레임워크에서도 그냥 숨쉬듯 볼 수 있다.

이렇게 파일을 모듈화하면 코드가 더 깔끔해지고 유지보수가 쉬워짐으로 그냥 무조건 필수적으로 쓰고 알고 있어야한다.

어제 리액트를 공부하면서 이런 말이 나왔다. 리액트는 선언형으로 작성해야하고 자바스크립트는 명령형으로 작성하라고 한다. ???? 이게 도대체 무슨 말인가? 싶어서 이제 검색을 해봤고 그에 관한 것을 정리하고자 한다.

명령형 프로그래밍(Imperative)

• 어떻게(How) 할 것인가에 집중하여야 한다.
• 개발자가 단계별로 명령을 내려서 원하는 결과를 얻는다.
• 보통 반복문, 조건문, 직접적인 DOM 조작 등이 포함된다.

const button = document.createElement("button");
button.textContent = "클릭!";
button.addEventListener("click", () => {
  alert("버튼 클릭됨!");
});
document.body.appendChild(button);

즉 개발자가 직접 순차적으로 이렇게 요렇게 할 것이다라고 명령을 내려서 프로그래밍 하는 것이다.

위의 코드 같은 경우도 개발자가 직접 DOM을 조작해서 순차적으로 명령을 내려서 UI를 업데이트 한 것.

선언형 프로그래밍(Declarative)

• 무엇을(What) 할 것인가에 집중
• 결과를 선언하고, 내부적으로 알아서 처리하도록 함
• 코드가 더 직관적이고 유지보수가 쉬움

function App() {
  return <button onClick={() => alert("버튼 클릭됨!")}>클릭!</button>;
}

직접적인 DOM을 조작하지 않고 이런 기능을 할 거야라고 선언만 한다.

이후 React가 이 선언을 바탕으로 내부적으로 최적화된 방식으로 UI를 그려준다.

그럼 어떤 게 더 좋다라는 게 있을까?

한 번 장단점을 비교해보자

명령형(Imperative)

장점

• 흐름을 세밀하게 제어가능하다
• CPU 연산, 알고리즘 최적화에 유리하다

단점

• 코드가 길고 복잡해짐
• 유지보수가 어려움

- 그래서 보통 성능이 중요한 저수준 작업 (Low-Level)에헛 구현, 디버깅이 중요한 경우.

선언형(Declarative)

장점

• 코드가 간결하고 가독성이 높다.
• 유지보수가 쉽다. (구현보다 로직에 집중)
• 병렬 처리 최적화 용이

단점

• 내부 동작을 완전히 제어하기 어려움
• 디버깅이 어려울 수 있다.

- UI 개발(React, HTML, CSS)이나 데이터 변환(SQL, Java Streams, Functional Programming), 프레임워크(Spring, ORM, DI)에서 많이 쓰일 수 있다.