React에서 순수 html 태그는 무조건 괄호로?

Q1.

react에서, 순수 html태그는 ()로 묶는거야?

(아래는 10-04 MyPropsTypesSub.js의 코드)

const MyPropTypesSub=({name, age, hobby}) => {
    return(
        <div>
            <h3>MyPropTypesSub</h3>
            <p>
                안녕못한다. 네놈의 이름은 {name}, 나이는 {age}세.
            </p>
            <p>
                {hobby && (<span>취미는 {hobby}냐?</span>)} {/** hobby 값이 있으면 출력, (아마 순수???????)html태그 덩어리는 일단 괄호로 감싸준다는 생각 하자. */}
            </p>
        </div>
    );
};

 

이 안에서, (<span>취미는 {hobby}냐?</span>) 이 부분처럼.

 

 

 

A1.

React에서 순수 HTML 태그(정확히는 JSX 태그)는 괄호로 묶어야 하는 경우와 그렇지 않은 경우가 있습니다. 당신이 언급한 부분에서 **괄호 ()**는 주로 코드의 가독성과 조건부 렌더링을 위한 컨벤션으로 사용됩니다.

---

1. JSX와 괄호

JSX는 JavaScript 안에서 HTML-like 태그를 작성할 수 있는 문법입니다. 순수 HTML 태그는 JSX 안에서 작성될 때 필수적으로 괄호로 감싸야 하지는 않지만, 특정 상황에서는 괄호를 사용해야 합니다.

괄호가 필요한 이유:

• 가독성: 복잡한 JSX가 조건부 렌더링(&&, 삼항 연산자 등)에 사용되면 괄호로 감싸는 것이 가독성을 높입니다.
• 명시적인 그룹화: JSX 태그가 단일 값처럼 평가되도록 보장합니다.

---

2. 코드 속의 예시

{hobby && (<span>취미는 {hobby}냐?</span>)}

이 부분에서는 조건부 렌더링을 위해 && 연산자가 사용되고 있습니다:

• hobby가 truthy한 경우에만 <span> 태그를 렌더링합니다.
• <span>이 JSX 표현식으로 평가되기 때문에, 괄호 ()를 사용하여 이를 명시적으로 감싸줍니다.

---

3. 괄호를 사용하는 상황

괄호 ()는 여러 줄의 JSX를 렌더링하거나 조건부/삼항 연산자와 함께 사용할 때 주로 사용됩니다:

가독성을 위한 괄호 사용

{
    condition &&
    (
        <div>
            <p>이 부분은 조건이 참일 때만 렌더링됩니다.</p>
        </div>
    )
}

• 괄호를 사용하면 조건부 렌더링 시 코드 블록처럼 보이기 때문에 더 읽기 쉽습니다.

삼항 연산자에서 사용

{isLoggedIn ? (
    <p>Welcome back!</p>
) : (
    <p>Please log in.</p>
)}

• 삼항 연산자의 결과로 반환될 JSX 블록을 괄호로 감싸면 명확성이 증가합니다.

---

4. 괄호가 필요하지 않은 경우

단순히 한 줄로 작성된 JSX는 괄호 없이 작성할 수 있습니다:

{hobby && <span>취미는 {hobby}냐?</span>}

위 코드는 완전히 동작하며, 괄호를 생략해도 됩니다. 괄호는 선택사항이며, 복잡한 구조일 때만 사용하면 됩니다.

---

5. 정리

• 괄호를 쓰는 이유는 명시적 그룹화와 가독성을 높이기 위해서입니다.
• 괄호는 필수는 아니지만, 조건부 렌더링(&&, 삼항 연산자)이나 복잡한 JSX 구조를 다룰 때 사용하면 코드가 더 읽기 쉬워집니다.
• 단순한 태그 한 줄은 괄호 없이 작성해도 됩니다.

결론적으로, 괄호는 "명확하고 읽기 쉽도록" 작성하기 위한 좋은 관례일 뿐, React에서 반드시 필요하지는 않습니다. 😄

 

 

 

Q2.

일단 아직 구분을 잘 못하는 상황이라면, 순수 HTML 태그는 그냥 ()로 묶는게 좋을까?

 

 

 

React를 처음 배우는 상황에서는, **순수 HTML 태그(JSX)**를 항상 괄호 ()로 묶는 습관을 들이는 것이 좋습니다. 이렇게 하면 조건부 렌더링이나 복잡한 JSX 구조에서 혼란을 줄이고, 나중에 더 자연스럽게 구분할 수 있게 됩니다.

---

괄호로 묶는 습관의 장점

1. 일관성 유지: 모든 JSX를 괄호로 묶으면 코드 스타일이 통일됩니다. 나중에 복잡한 조건문이나 중첩된 JSX를 다룰 때 실수가 줄어듭니다.
2. 가독성: 괄호로 묶인 JSX는 코드 블록처럼 보이기 때문에 더 읽기 쉽습니다.
3. 구문 에러 방지: 특정 상황에서 괄호를 생략하면 예상치 못한 구문 에러가 발생할 수 있습니다. 초반에는 항상 묶어두면 이런 문제를 피할 수 있습니다.

---

추천 접근법

초반에는 괄호를 항상 사용하면서 익숙해진 뒤, 나중에 간단한 경우에만 생략하는 방법으로 넘어가면 됩니다.

항상 괄호로 묶기

return (
    <div>
        <h1>Hello, React!</h1>
        {condition && (
            <p>조건이 참일 때만 이 문장이 보입니다.</p>
        )}
        {isLoggedIn ? (
            <p>Welcome back!</p>
        ) : (
            <p>Please log in.</p>
        )}
    </div>
);

괄호를 생략해도 되는 경우

익숙해지면 아래처럼 간단한 JSX는 괄호를 생략할 수 있습니다:

{condition && <p>조건이 참일 때만 이 문장이 보입니다.</p>}

---

괄호를 항상 묶는 규칙

간단하게 기억할 수 있는 규칙:

 

1.조건부 렌더링: 항상 묶는 것이 좋습니다.

{condition && (<p>This is a conditional render.</p>)}

 

2.복잡한 JSX: 여러 줄로 작성될 경우 묶는 것이 필수입니다.

{isLoggedIn ? (
    <div>
        <h2>Welcome</h2>
        <p>Glad to see you!</p>
    </div>
) : (
    <p>Please log in.</p>
)}

 

3. 단순한 한 줄 JSX: 익숙해지기 전에는 묶는 습관을 유지하세요.

---

결론

React 초보라면 모든 JSX를 괄호로 묶는 습관을 들이는 것이 좋습니다. 익숙해지면 단순한 상황에서 생략하는 방법으로 점차 넘어가세요. 일관된 코드 스타일은 장기적으로 도움이 많이 됩니다. 😊