props, import, export

/Javascript, React

 

리액트 공부를 하다가 분명 저번 강의에서도 내가 활용하고, 적은 코드인데 기억이 안 나는 부분이 있어서 정리해보려고 함.

 

📌 Props가 대체 뭔데

 

Props는 Properties의 줄임..이라고 볼 수 있겠다. 리액트에서 컴포넌트에 정보를 전달할 때 사용하는 일종의 매개변수라고 보면 된다. 컴포넌트끼리의 정보 전달에도 유용하다. 부모 컴포넌트에서 자식 컴포넌트로 속성 형태로 전달된다. 예를 들어 보면,

function Parent() {
  return <Child name="철수" age={5} />;
}

function Child(props) {
  return (
    <div>
      <h1>안녕하세요, 제 이름은 {props.name}이고, 나이는 {props.age}살이에요!</h1>
    </div>
  );
}

 

위와 같은 코드에서 Parent는 name과 age props를 Child로 전달하고, Child는 해당 props 객체를 받아 사용하고 있다. 

 

유의할 점은 props는 읽기 전용이라는 점. 즉 자식 컴포넌트는 받은 값을 수정할 수 없고, 화면에 출력해 주는 등 읽기에만 사용할 수 있다. props로 다양한 타입의 데이터를 전달할 수 있다는 것을 이해하면 활용도가 더 높아진다.

 

// 부모 컴포넌트 (Parent.js)
function Parent() {
  return (
    <Child
      name="민수"
      age={10}
      isStudent={true}
      friends={["철수", "영희"]}
    />
  );
};

// 자식 컴포넌트 (Child.js)
function Child(props) {
  return (
    <div>
      <h1>안녕하세요, 제 이름은 {props.name}이고, 나이는 {props.age}살이에요!</h1>
      <p>학생인가요? {props.isStudent ? "네" : "아니요"}</p>
      <p>친구들: {props.friends.join(", ")}</p>
    </div>
  );
}

 

위의 예시처럼 불리언 값이나 배열 또한 전달할 수 있다.

 

// 부모 컴포넌트 (Parent.js)
function Parent() {
  const handleClick = () => {
    alert("버튼이 클릭됐어요!");
  };

  return <Child onClick={handleClick} />;
}

// 자식 컴포넌트 (Child.js)
function Child(props) {
  return <button onClick={props.onClick}>클릭하세요!</button>;
}

 

함수 또한 props로 전달할 수 있다. 자식 컴포넌트에서 버튼을 클릭했을 시 onClick 이벤트 핸들러로 handleClick함수를 활용하고 있는 것을 위의 예시에서 볼 수 있다.

 

 

 

 

📌 Export? Import?

 

Export와 Import는 말 그대로 가져오고 내보내는 기능을 담당한다. 서로 다른 파일 간에 코드나 기능을 공유하고 싶을 때 사용한다고 보면 된다. 

 

먼저 Export는 내보내기. 한 파일에 작성한 코드를 다른 파일에서 쓸 수 있도록 하는 것을 담당한다.

// myModule.js 파일
export const greeting = "안녕하세요!";
export function sayHello(name) {
  return `${greeting} ${name}님!`;
}

 

myModule.js 파일에서 greeting와 sayHello를 제작하였다. 이 두 기능을 다른 파일에서 활용하려면 export를 통해 내보내주어야 한다.

 

// main.js 파일
import { greeting, sayHello } from './myModule';

console.log(sayHello("철수"));  // "안녕하세요! 철수님!"

 

main.js파일에서 myModule.js파일에 존재하는 greeting과 sayHello를 사용하기 위해 import 해주었다. 이후 console log로 해당 함수를 찍어보면 정상 작동하는 것을 확인할 수 있다.