Ch1-4. 네비게이션바 컴포넌트 만들기(1부) 에서 오류질문

Question

안녕하세요 강의 코드 중에 질문드립니다.

상단 네비게이션바 코드 작성시

Navbar.jsx 에서 노션에 올려주신 MenuItem 컴포넌트가 올바로 작동하지 않습니다.

다만, 찾아보니 '화살표 함수에서 중괄호를 사용하면 명시적으로 return문을 작성해야 JSX가 반환됩니다.' 라고 하는데...

실제로 return 을 추가하면 실행이 됩니다.

선생님 강의에서는 MenuItem 컴포넌트 선언시 retrun 명시를 안하신거 같은데 어떻게 개발서버에서 상단 네비바가 보여지나요..?

(전 : 노션코드)

const MenuItem = ({ path, label, onClick }) => ( <li> <Link to={path} className="hover:text-blue-600 transition duration-300" onClick={onClick} > {label} </Link> </li> );

(후-실행됨)

const Menuitem = ({ path, label, onClick }) => {
  return (
    <li>
      <Link
        to={path}
        className="hover:text-blue-600 transition duration-300"
        onClick={onClick}
      >
        {label}
      </Link>
    </li>
  );
};

{label}

); (후-실행됨) const Menuitem = ({ path, label, onClick }) => { return (

{label}

); };

BS · Answer

아하 괄호 차이였군요.. 이해했습니다. 답변 감사합니다.

닭강정 · Answer

안녕하세요. Ch.1-4 네비게이션 바 코드 스타일 작성에 대해 답변하겠습니다. React 컴포넌트를 작성할 때는 화살표 함수(Arrow Function)를 자주 사용합니다. 이때 JSX를 반환하는 방식에는 두 가지가 있습니다: 암시적 반환 (implicit return) 과 명시적 반환 (explicit return) 입니다. 아래 예제를 통해 두 방식의 차이를 살펴보겠습니다. 1. 암시적 반환 (Implicit Return) 노션코드 const MenuItem = ({ path, label, onClick }) => (

{label}

); 함수 몸체에 중괄호 {} 를 사용하지 않고, 소괄호 () 안에 JSX를 바로 작성합니다. return 키워드를 생략 해도 자동으로 JSX를 반환합니다. 2. 명시적 반환 (Explicit Return) 질문자님 코드 const MenuItem = ({ path, label, onClick }) => { return (

{label}

); }; 함수 몸체에 중괄호 {} 를 사용하고, JSX를 return 키워드로 명시적으로 반환합니다. 조건문, 변수 선언, 로직 추가 등 이 필요한 경우에는 이 방식이 유리합니다. 두 코드 모두 단순히 작성 방식의 차이 일 뿐이며, 실행에는 전혀 문제가 없습니다 . 첫 번째 코드는 암시적 반환(implicit return) 을 사용해 보다 간결하게 작성되었고, 두 번째 코드는 명시적 반환(explicit return) 으로 JSX를 return 문을 통해 명확히 반환하는 방식입니다. 어떤 방식을 사용해도 동일하게 작동하며, 상황에 따라 선택하시면 됩니다. 다만, 질문자님께서 올려주신 코드에서 컴포넌트 이름이 MenuItem 이 아닌 Menuitem 으로 작성된 부분 이 보입니다. 오타 부분 확인해보시고, 그래도 해결되지 않으면 다시 답변 남겨주세요. 감사합니다!

인프런 커뮤니티 질문&답변

Ch1-4. 네비게이션바 컴포넌트 만들기(1부) 에서 오류질문

1. 암시적 반환 (Implicit Return) 노션코드

2. 명시적 반환 (Explicit Return) 질문자님 코드