JSX에서 조건문 사용하기

React 내의 JSX 안에서는 if문을 사용할 수 없다.

 

 

JSX내에서 if문을 사용할 수 없는 이유

JSX내에서는 표현식만 사용가능하다.

먼저 자바스크립트에서 실행 가능한 코드줄을 문(statement) 이라고 부른다. 문 중에서도 값으로 평가될 수 있는 문을 표현식(expression)이라고 부른다.

● 표현식에 해당하는 문 : 명확한 값이 반환되어 값으로 평가가 가능하다.

let a = 3;

true ? <div>true</div> : <div>false</div>

●  표현식이 아닌 문 : 명확한 값이 반환되지 않고 실행문 등을 포함한다.

if ( true ) {
    console.log("true");
} else {
    console.log("false");
}​

이외 for 반복문 등...

 

개발자가 JSX내에 작성한 코드는 변환 과정을 거친다. 예를들어

const element = <h1>Hello, World!</h1>;

// 이 코드는 아래와 같이 변환된다.

const element = React.createElement( "h1", null, "Hello, world!" );

 

React.createElement로 변환된 코드는 첫번째 인자로 태그명, 두번째 인자로 props, 세번째 인자로 자식 요소들을 받는다. 이 자리에는 명확한 값을 작성해주어야 하는데 if문은 표현식이 아닌 일반 문으로 분류된다. 따라서 JSX 내에서는 if문을 사용할 수 없는 것이다.

 

for 반복문을 사용할 수 없는것도 같은 원리이다.

 

 

JSX 내에서 조건문을 사용하려면?

1. 표현식에 해당하는 조건문 사용 (삼항연산자)

return(
    <div>
        {조건 ? <div>true</div> : <div>false</div>}
    </div>
)

조건이 참이면 왼쪽항목이, 거짓이면 오른쪽항목이 표시된다.

• tip : 삼항연산자의 조건 내부에도 복잡한 조건식을 사용할 수 있다.

const [data, setData] = useState([]);

return(
    <div>
        {data.length > 0 ? <div>{data}</div> : <div>loading...</div>}
    </div>
)

state의 데이터가 나중에 채워지는 경우(서버에서 데이터를 불러와야 하는 경우) 불러오는 값이 배열값인 경우가 있다.

이때 state의 기본값을 빈 배열로 두면 map함수등을 사용할때 에러없이 사용할 수 있으며 데이터의 일관성을 유지하여 타입에러를 방지할수도 있다.

해당 state의 length값 (data.length)이 0을 초과하는지 검사하는 조건을 활용하여 데이터가 채워지기전까지 로딩메시지를 띄워줄 수 도 있다.

 

2. 논리 연산자 활용

return(
    <div>
        {id && <div>{id}님, 반갑습니다.</div>}
    </div>
)

userId값이 존재하면 우측의 <div>가 표시된다.

 

 

그럼에도 if문을 사용하고 싶다면?

1. JSX 외부에서 if문 사용

function App({id}) {
    function welcomeMsg() {
        if (id) {
            return <div>{id}님, 반갑습니다.</div>;
        }
    }
    return (
        <div>
            {WelcomeMsg();}
        </div>
    );
}

 

2. 분리된 컴포넌트에서 if문 사용

function Welcome({id}) {
    if (id) {
        return <div>{id}님, 반갑습니다.</div>;
    } else {
        return <div>로그인해주세요</div>;
    }
}

function App() {
    return (
        <div>
            <Welcome id={userId} />
        </div>
    );
}

 

3. 즉시실행함수 사용 (비권장)

return (
    <div>
        {(function () {
            if (id) {
                return <div>{id}님, 반갑습니다</div>;
            }
        })()}
    <div>
)

 

 

 

특수한 경우를 제외하면 대부분의 경우 삼항연산자와 논리연산자를 활용해서 대부분의 조건문을 처리할 수 있다.