Describing the UI

UI 설명

React는 UI 렌더링을 위한 JavaScript 라이브러리이다. React를 사용하면 재사용 가능하고 중첩 가능한 구성 요소로 결합할 수 있다.

 

 

JSX로 마크업 작성하기

일단 JSX에 대해 알아볼 필요가 있다. JSX는 HTML과 비슷하게 생겼지만, JavaScript를 확장한 문법이다.

const name = 'Minjun Kim';
const element = <h1>Hello, {name}</h1>

 

위와 같이 HTML 태그로 이루어진 element 자체를 변수로 선언하여 할당할 수 있다.  JSX의 중괄호 안에는 모든 JavaScript 표현식이 들어갈 수 있다.

 

따라서, 예를 들어 어떤 태그에 속성을 동적으로 추가하고 싶을 경우 JSX를 활용할 수 있다. 또 JSX를 활용함으로써 많은 속성을 넣게 되었을 때 지저분해 보일 수 있는 단점을 따로 빼서 JSX 변수로 삽입하여 깔끔하게 유지할 수 있다.

 

조건부 렌더링

JSX를 가장 많이 활용하게 되는 경우가 이 조건부 렌더링과 반복문을 사용할 때가 아닌가 싶다. React 에서는 if문, &&, ? : 연산자와 같은 JavaScript 구문을 사용하여 JSX를 조건부로 렌더링할 수 있다.

 

보통 다음 예시와 같이 && 연산자를 이용한 조건부 렌더링을 많이 사용하고, 사용했던것 같다.

 

 

위의 개념과 함께 '단축 평가'라는 개념도 함께 알고가면 좋지 않을까 싶다. 위 코드에서도 보면 isPacked라는 변수는 boolean 값으로 true 아니면 false 라는 값을 가진다. 상단의 Item 컴포넌트에서 보면, isPacked를 prop으로 받아서 {isPacked && '✔'} 라는 JSX 구문을 사용한다. 이것이 단축 평가이다.

 

위의 단축 평가를 if문으로 풀어서 사용한다면 아래와 같을 것이다.

 

// 단축 평가
function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'} // isPacked가 true라면 '✔' 표시
    </li>
  );
}

// 삼항 연산자
function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked ? '✔' : ''}
    </li>
  );
}

// if 조건문
function Item({ name, isPacked }) {
  let check = '';
  
  if(isPacked === true) {
    check = '✔'
  }  
  
  return (
    <li className="item">
      {name} {check}
    </li>
  );
}​

위의 3가지 방법 모두 같은 결과를 도출한다. 하지만 단축 평가를 이용했을 때 훨씬 간결한 것을 볼 수 있다. 실제로도 저 방법을 많이 사용한다.

 

그럼 저 단축평가는 어떤 식으로 동작되어 결과를 나타낼까?

일단 조건문을 이용해서 boolean 값 사이의 비교연산을 이용한 예시를 보자. (그 전에! 기본적인 것부터 짚고 넘어가보자면 if문은 if문의 조건식이 true일 때 if문 안의 코드가 실행된다.)

/* 
  a && b가 true임을 판단하려면 a와 b가 모두 true가 되어야 한다.
*/

// 앞의 값이 true 지만 뒤의 값에 따라서 결과가 바뀌므로 뒤의 값까지 봐야한다.
if(true && true) { // true
  ...
}
// 위와 같은 이유
if(true && false) { // false
  ...
}
// 앞의 값이 false 라서 뒤의 값에 상관없이 어차피 false이다.
// 따라서 굳이 뒤의 값을 검사할 필요가 없다.
if(false && false) { // false
  ...
}
// 위와 같은 이유
if(false && true) { // false
  ... 
}

/* 
  a || b가 true임을 판단하려면 두 가지 경우만 생각하면 된다
  a가 true일 경우, b의 값에 상관없이 어차피 true이기 때문에 굳이 검사할 필요가 없다.
  a가 false일 경우, b의 값에 따라서 값이 결정되므로 b도 검사해야 한다.
*/

// 앞의 값이 true이기 때문에 뒤의 값에 상관없이 이 조건식은 true이다.
if(true || true) { // true
  ...
}
// 위와 같은 이유
if(true || false) { // true
  ...
}
// 앞의 값이 false이기 때문에 뒤의 값을 확인해야 한다.
if(false || false) { // false
  ...
}
// 위와 같은 이유
if(false || true) { // true
  ... 
}

 

위를 참고해서 {isPacked && '✔'} 가 어떻게 실행되는지 살펴보자.

 

일단 isPacked가 true일 경우를 생각해보자. 그렇다면 뒤의 값에 따라서 조건의 결과가 달라지므로 && 뒤의 '✔'도 검사해야 한다.(일반적으로 nullish한 값이 아니고, 값이 존재한다면 truely한 값이다) 따라서 isPacked가 true일 경우에는 '✔'가 화면에 렌더링 되는것이다.

 

isPacked가 false일 경우를 생각해보자. && 연산자의 앞에 있는 isPacked가 false이다. 그러면 뒤의 값에 상관없이 이미 이 조건의 결과는 false이다. 따라서 && 연산자의 뒤의 값을 볼 필요가 없는것이다. 그러므로 '✔'까지 보지 않으므로 화면엔 출력되지 않는다.

 

위 처럼 if문과 삼항 연산자로도 조건부 렌더링이 가능하지만 이해한다면 JSX를 사용해 단축 평가로 깔끔하고 짧게 조건부 렌더링을 수행할 수 있다.

 

 

리스트 렌더링

위의 조건부 렌더링과 함께 JSX를 많이 이용하게 될 때가 리스트를 렌더링할 때이다. 위에서 말했지만, JSX의 중괄호 안에는 어떠한 JavaScript 표현식이 들어갈 수 있다. 따라서 .map() 을 이용해서 배열의 값으로 리스트를 렌더링할 때 쓰인다.

 

배열에 들어있는 값들로 태그에 속성을 지정해 줄 수 있다. 이때 key 속성을 사용하는데, 반복문을 이용해서 element를 여러개 생성할 경우 DOM Tree 에서 같은 단계, 혹은 깊이에 형제 element 들이 생길 것이다. 이 때, 각 형제 요소 간에 구분할 수 있기 위해 key 속성을 반드시 넣어야 하고, 다른 형제 요소와 key 값이 중복되면 안된다. key값 외에도 다른 속성에 배열의 값을 삽입할 때 JSX 구문을 사용하는 것을 볼 수 있다.