// 동일한 레벨에 여러 개의 요소를 반환하면 오류가 발생합니다.
function App() {
return (
<h1>React 요소 알아보기</h1>
<h2>React 컴포넌트의 return은 하나의 부모 요소만 반환해야 합니다.</h2>
);
}
export default App;
⬆️ JSX에서는 하나의 부모 요소만 반환할 수 있습니다. 위 예시처럼 여러 개의 요소가 동일한 레벨에서 반환되면 오류가 발생합니다.
💻해결 방법 1 Fragment
function App() {
return (
<Fragment> // import { Fragment } from 'react'
<h1>React 요소 알아보기</h1>
<h2>React 컴포넌트의 return은 하나의 부모 요소만 반환해야 합니다.</h2>
</Fragment>
);
}
export default App;
⬆️ Fragment는 여러 요소를 하나의 부모 요소로 감싸기 위해 사용할 수 있는 React의 내장 컴포넌트입니다. Fragment는 실제로 DOM에 아무런 영향을 주지 않으므로, 불필요한 DOM 요소를 생성하지 않고 여러 개의 JSX 요소를 그룹화할 수 있습니다.
💻해결 방법 2 <></>
function App() {
return (
<>
<h1>React 요소 알아보기</h1>
<h2>React 컴포넌트의 return은 하나의 부모 요소만 반환해야 합니다.</h2>
</>
);
}
export default App;
⬆️React에서는 Fragment를 사용하는 대신, 빈 태그(<> </>)를 사용할 수 있습니다. 이 방법은 Fragment의 축약형으로, 코드가 더 간결해지며 기능은 동일합니다.
💡 JSX 안에서는 자바스크립트 표현식을 {}로 감싸서 작성
📃 JSX 안에서 자바스크립트 코드를 실행하려면, 중괄호 {} 안에 작성해야 합니다. 예를 들어, 변수나 표현식을 출력하려면 {}를 사용해 JSX에서 자바스크립트 문법을 사용할 수 있습니다
💻태그에서 중괄호로 감싸기
function App() {
const count = 0;
return (
<>
<h1>count</h1>
<h2>{count + 1}</h2> // 중괄호를 통해서 js 문법 사용이 가능합니다
</>
);
}
export default App;
⬆️ 원래는 document.querySelector를 사용해 h2 태그 요소를 가져와서 업데이트하는 방식이었을 것입니다
💡JSX 내부에서 자바스크립트의 if 문의 사용할 수 없으므로, 삼항 연산자 사용
📃JSX 내부에서는 자바스크립트의 if 문을 직접 사용할 수 없지만, 대신 삼항 연산자를 사용하여 조건부 렌더링을 할 수 있습니다
function App() {
const isLoggedIn = true;
return (
<>
<h1>Welcome to React</h1>
{/* 삼항 연산자를 사용하여 로그인 여부에 따른 메시지 출력 */}
{isLoggedIn ? <p>Logged in</p> : <p>Logged out</p>}
</>
);
}
export default App;
⬆️위 예시에서, isLoggedIn 값이 true일 경우 "Logged in"이 출력되고, false일 경우 "Logged out"이 출력됩니다. 이처럼 삼항 연산자는 JSX 내에서 조건부 렌더링을 할 때 유용하게 사용됩니다.
💡JSX 인라인 스타일
📃 JSX에서 인라인 스타일을 사용하려면, 스타일 객체를 중괄호 {}로 감싸서 style 속성에 전달합니다. 스타일 속성의 이름은 camelCase로 작성해야 하며, 값은 문자열로 전달합니다
💻태그에서 style 사용
function App() {
return (
<>
<h1 style={{ backgroundColor: "black", color: "yellow", fontSize: 28, padding: '16px' }}>React 요소 알아보기</h1>
<h2>React 컴포넌트의 return은 하나의 부모 요소만 반환해야 합니다.</h2>
</>
);
}
export default App;
⬆️ JSX에서 인라인 스타일은 style={{}} 형태로 작성하고, 각 스타일 속성은 camelCase로 설정합니다
💡 함수가 undefined를 반환하지 않도록 조정
📃 JSX에서 함수가 undefined를 반환하지 않도록 하려면, 함수의 반환값을 항상 유효한 JSX 또는 null로 반환해야 합니다. 만약 아무것도 반환하고 싶지 않다면 null을 반환하여 렌더링을 건너뛸 수 있습니다
💻 컴포넌트는 undefined 일 수 없습니다
function App() {
const showContent = false;
return (
<>
<h1>React 요소 알아보기</h1>
{/* showContent가 false일 경우 아무것도 반환하지 않도록 null 반환 */}
{showContent ? <h2>내용이 표시됩니다.</h2> : null}
</>
);
}
export default App;
⬆️ 위 예시에서 showContent가 false일 경우, h2 태그는 렌더링되지 않으며, null을 반환해 아무것도 화면에 표시되지 않도록 합니다.
💡 CSS 클래스를 사용할 때 class가 아닌 className을 사용
📃 JSX에서는 HTML의 class 속성 대신, className을 사용해야 합니다. 이는 class가 JavaScript의 예약어이기 때문입니다.
💻 className 활용
function App() {
return (
<div className="container">
<h1>React 요소 알아보기</h1>
<h2>class 대신 className을 사용합니다.</h2>
</div>
);
}
export default App;
⬆️ JSX에서 class 대신 className을 사용해야 CSS 클래스를 적용할 수 있습니다.
💡 모든 태그는 반드시 닫는 태그를 사용
📃 JSX에서는 HTML과 마찬가지로 모든 태그가 반드시 닫는 태그를 사용해야 합니다. 일부 태그는 자가 닫힘(self-closing) 형식으로 사용될 수 있지만, 여전히 종료 태그가 필요합니다. 예를 들어, <img />와 같은 자가 닫히는 태그는 종료 슬래시(/)를 포함해야 합니다
