JSX (Javascript XML)


변수 활용하기

JSX (Javascript XML)에서 변수를 사용하는 방법, 조건부 연산자 등 다양한 문법에 대해 알아보겠습니다.

웹, 프로그래밍 등 코드를 작성하는 경우에 특정 영역과 조건에 따라, 해당 내용을 변경하고 싶은 욕구가 있습니다.

import React, { Fragment } from 'react';

function App() { // 함수형 컴포넌트
  return (
    <>
      <h2>리액트님 안녕하세요!</h2>
    </>
    
  );
}

export default App;

위 코드는 리액트님 안녕하세요! 라는 메시지를 나타냅니다. 나중에 로그인 기능을 구현하여 리액트라는 문자열을 사용자마다 변경하고 싶을 때는 어떻게 해야 할 까요?

import React, { Fragment } from 'react';

function App() { // 함수형 컴포넌트
  let name = "사용자";
  return (
    <>
      <h2>{name}님 안녕하세요!</h2>
    </>
    
  );
}

export default App;

위 코드 처럼 return() 밖에 name이라는 변수를 만들어서 사용자라는 값을 저장했습니다.

이 데이터를 사용하기 위해서는 {} 을 이용해 해당 변수 명을 넣어주면 사용할 수 있습니다.

javascript에서 변수를 사용하기 위한 여러가지 명칭들이 있습니다. let, const, var 등이 있는데, 해당 내용은 다음 포스트에서 다루도록 하겠습니다.

조건부 연산자

웹 페이지를 구성하면서, 관리자일때 나타나는 메뉴와 일반 사용자일 때 나타나는 메뉴가 다르게 표현도 하고 싶은 경우가 있습니다.

import React, { Fragment } from 'react';

function App() { // 함수형 컴포넌트
  let name = "관리자";
  return (
    <Fragment>
      <div>
        {name === "관리자" ? (<h2>{name}님 안녕하세요. (관리자)</h2>) : (<h2>{name}님 안녕하세요. (일반사용자)</h2>)}
      </div>
    </Fragment>
    
  );
}

export default App;

위 코드 처럼, name이 “관리자”인 경우 (관리자)가 나타나며, 일반 사용자의 경우 (일반 사용자)가 나타납니다.

조건부 연산자는 변수 === 내용 ? (일치하는 경우) : (일치하지 않는 경우)로 표현할 수 있습니다.

타 프로그래밍 언어의 삼항 연산자와 동일합니다.

&& 연산자

개인적으로 위 조건부 연산자에서 일치하는 경우와 일치하지 않는 경우에 따른 내용을 명확히 보여주는 것이 좋다고 생각합니다.

하지만, 이를 간단히 작성할 수 있습니다.

import React, { Fragment } from 'react';

function App() { // 함수형 컴포넌트
  let name = "관리자";
  return (
    <Fragment>
      <div>
        {name === "관리자" ? (<h2>{name}님 안녕하세요. (관리자)</h2>) : (<h2>{name}님 안녕하세요. (일반사용자)</h2>)}
      </div>

      <div>
        {name === "관리자" && <h2>{name}님 안녕하세요. (관리자)</h2>}
      </div>
    </Fragment>
    
  );
}

export default App;

위 코드에서 &&를 활용한 구문이 있는데 name === “관리자” 에서 true와 false를 판단하고, <h2>{name}님 안녕하세요. (관리자)</h2> 는 true가 됩니다.

&& 연산자는, true/true = true, false/true = false 가 되므로, 관리자가 맞다면 true/true로 true가 되어 해당 내용이 출력됩니다.

관리자가 아닌 경우 false/true로 false가 되면서 화면에서 나타나지 않습니다.

&& 연산 외에도 || (OR) 연산자가 있습니다. 양쪽을 비교하여 하나만 true인 경우에 해당 내용이 출력됩니다.




© 2017. by k3y6reak

Powered by k3y6reak