React 입문(7) : if Statement : Conditional Rendering in return(); also Invoking Functions (last update: 2020.12.23.)

2-1. if Statement : Conditional Rendering in return(); also Invoking function in React.js

Notion의 Theory & Technique : React.js 페이지 바로가기

---

0. References

Is it possible to use if...else... statement in React render function? - stackoverflow

---

1. Introduction

stackoverflow를 뒤적거리며 실무 코드를 동작하게 만드는 것은 생각보다 할 만 하지만, 아직 es6 및 react.js의 기본 문법에 익숙하지 않아 아주 기초적인 코드를 작성할 때도 턱 막히는 순간들이 있다. 이번에도 바로 그런 경우를 다루고 있는데, 바로 Conditional Rendering, 즉 조건부 렌더링 구문을 작성하는 부분이다. React에서 Conditional Rendering을 작성하는 경우는 일반적으로 Arrow Function, Ternary Operator, && statement 등을 통해 처리한다고 알고 있었지만, react-device-detect 라이브러리를 사용하고 있었기 때문에 각 플랫폼 및 범 모바일/pc간 분기 처리는 if statement(if 구문)로 처리해야 했다. 조건문 자체를 작성할 때 const : boolean타입 라이브러리를 사용해야 했기 때문이다. 또한 각 함수의 선언은 어떻게, 어디에 해야 하는지. 또 어떻게 호출해야 하는지 또한 새로운 문법에 익숙하지 않아 다소 시행 착오가 있었다. 이번 기회에 기초를 다져본다.

---

2. Syntax

우선, Component의 각 구성 요소 및 작성 순서를 다음과 같이 나눠서 정의해 본다 :

이 중, render(){ return(); }의 내부에 Component가 반환할 JSX 코드 구성 중 조건부 렌더링 구문의 작성 시에는 주의할 점이 있다. 바로 if Statement의 작성이 필요하다고 해서, 바로 JSX 코드 내부에 작성해서는 정상적으로 동작하지 않으며, Arrow Function(화살표 함수)를 먼저 선언한 후 그 내부에 작성해 주어야 의도한 대로 동작하고, 조건부 렌더링이 가능하게 된다는 점이다.

자세한 코드 작성법은 아래와 같다:

---

3. Examples & Usages

CONTENT* - CONDITIONAL RENDERING WITH ARROW FUNCTIONS

{ // CONDITIONAL RENDERING FROM HERE
	(( ARROW FUNCTION PARAMETERS ON HERE ) => {
        if (CONDITION1) {
          return (
           JSX CODE ON HERE : IF CONDITION 1 IS TRUE
	          ) // end of return : condition 1
        } else if (CONDITION2) {
          return (
            JSX CODE ON HERE : IF CONDITION 2 IS TRUE ALSO CONDITION 1 IS FALSE
          ) // end of return : condition 2
        } else {
          return (
	    JSX CODE ON HERE : ELSE-STATEMENT
          ) // end of return : else
        } // end of else-statement
      })() // end of arrow function
} // END OF CONDITIONAL RENDERING

위와 같이, render(){ return( 이 내부에* ); } JSX 코드를 작성하여 반환 및 렌더링 하고자 할 때, 또 그러한 코드 내부에서 조건부 렌더링이 필요한 경우는 다음과 같은 순서로 코드를 작성한다:

1. 먼저, brace( }, (중괄호)로 한 번 묶어준다.
2. brace 내부에 작성을 시작한다. Arrow Function 또는 Ternary Operator와 같은 양식을 적는다.
3. 그 내부에 if statement를 작성해 준다
4. 단, 실행 구문 영역(block of code to be executed if the condition is true)을 바로 작성하지 않고, 반드시 return()을 선언한 후 그 내부에 코드를 작성한다.

구조만 놓고 따져보면 특별하게 어렵지는 않다. 단, 여기서 반드시 기억해야 할 점은, 1. 함수의 선언은 render(){ 구문과 return(); 구문의 사이에 작성하지 않고, constructor의 후위에 작성한다는 점. 2. JSX 코드 내부에 Conditional rendering이 필요한 경우는 반드시 braces{}로 먼저 묶어준다는 점. 3. braces 내부에 바로 if statement를 작성하지 않고, 함수로 선언한 후 그 내부에 작성해야 한다는 점. 4. if statement의 실행 구문 역시 return()을 먼저 선언한 후 그 내부에 작성해야 한다는 점이다.

React는 JavaScript를 기반한 특성 상 괄호가 많고, 특히 각 코드를 용도와 방식에 따라서 묶고자 하는 성향이 강하다고 느껴진다. (예를 들어 JSX 코드 구문에서, HTML과 다르게 복수의 요소들을 div 또는 React.Fragment로 묶지 않으면 에러가 나는 경우 등) 따라서 아직 문법에 익숙하지 않다면, 이 괄호가 어디서 온 것이고 얘는 또 뭘 묶으려고 괄호를 필요로 하는 것인지 헷갈릴 수 있다. 이건 너무나도 당연한 과정이다. 코드를 자주 보면서 이 괄호는 왜 있는 것인지, 왜 이 코드들이 묶여있는 것인지 관심을 가지며 작성하면 곧 익숙해지지 않을까 싶다.

---