12. React (Re: act #1.5)

JSX 문법

부모 요소가 없는 경우

최상위에는 반드시 하나의 Element만 위치해야 한다

즉, 여러 컴포넌트가 존재한다면 그것들을 감싸줄 부모 요소가 하나는 필요하다는 것이다

VSCode 내에서 이미 잘못된 코드임을 알려주고 있으며, React page에서 또한 에러를 출력한다

위 코드는 아래와 같이 수정해야만 정상적으로 동작할 수 있다

부모 요소 <div>를 추가해줌과 동시에 잘 동작하는 것을 확인할 수 있다

 

이러한 에러가 발생하는 이유는 리액트가 가지고 있는 특징 중 하나인 Virtual DOM 때문이다

Virtual DOM에서 변화를 감지하고 효율적인 렌더링을 진행하기 위해서는

최상위 컴포넌트의 내부는 하나의 DOM tree의 구조를 이루어야하기 때문이다

 

그렇다면 부모 요소로는 꼭 <div> 여야만 하는가?

에러 코드를 살펴보면 Fragment라는 것이 있다

이 Fragment를 사용해서 <div>를 대체할 수도 있다

<div> 에서 <> 형태의 Fragment로 변경되었지만 동일한 결과를 렌더링하고 있다

( <Fragment> 라고 직접 태그 안을 정의해주어도 정상 동작한다, 편한걸 사용)

 

 

자바스크립트를 표현할 때는 JSX 내부에서 { }를 사용해 표현

JSX가 실행될 때 { }를 만나면 지금부터 자바스크립트 문법을 사용하겠다는 의미

위와 같이 { }안에 넣을 변수를 자바스크립트를 사용하듯 선언하여 할당할 수 있다

( var, let, const의 차이, 링크 추가 예정 )

 

 

 

리액트의 if문과 조건부 연산자

JSX 내부에서는 자바스크립트 표현식을 사용하더라도 if문을 사용할 수는 없다

그렇다면 조건에 따른 데이터 처리는 어떻게 할 수 있을까?

두 가지 방법이 있는데 하나는 JSX 밖에서 조건을 이용해 미리 값을 설정해두거나,

표현식 안에서 조건부 연산자를 사용하여 표현할 수 있다

 

조건부 연산자를 이용해 어떻게 조건을 처리하는지 살펴보자

name이 "React"와 같다면 Hello, {name} !을 출력하는 코드로 결과가 잘 출력된다

 

위는 React를 Reacts로 변경하여 값을 비교한 경우이며, 위의 React 비교시와 다른 결과를 확인할 수 있다

 

이러한 이유는 삼항 연산자의 특징 때문인데, 삼항 연산자는 아래와 같은 형태로 사용한다

비교문 ? 참 : 거짓

비교문의 결과가 참이라면 ? 뒤의 첫 번째 값이, 거짓이라면 : 뒤에 값이 결과값이 된다

해당 코드에서는 조건부 연산자로 JSX 내에서 조건 처리가 잘 되는 것을 확인할 수 있다

 

위 코드에서 만약 Hello, {name}의 결과만 출력하고 싶다면 && (and)연산자를 사용할 수도 있다

{name === "React" && <div><b>Hello, {name} !</b></div>}

 

 

undefined 렌더링

리액트 컴포넌트 함수 내에서는 undefined를 반환하여 렌더링하면 안된다

기본적으로 undefined와 같이 렌더링을 할 값이 없으면 안되고, 굳이 렌더링 하고 싶지 않다면

null 값을 리턴하라는 에러 메시지가 출력되고 있다

 

잠시 null과 undefined의 차이를 살펴보자

실제로 null값을 넣으면 아무것도 나오지 않는 빈 도큐먼트가 출력되어진다

 

이는 null과 undefined의 차이 때문인데, null은 개발자가 의도적으로 비워놓은 값이다

반면에 undefined는 의도적이 아닌, 어떠한 이유에서 설정되지 않은 값을 의미하기 때문이다

 

다시 돌아와서 컴포넌트 함수 내에서는 OR 연산자를 통해 예외처리를 해줄 수 있다

이와 같이 리턴 시 name 또는 " " 문자열을 출력할 수 있도록 설정해줄 수 있다

경우에 따라 name이 undefined와 같은 상태라면 문자열을 출력하게 될 것이다

 

컴포넌트 함수가 아닌 JSX 내부에서는 얼마든지 undefined를 렌더링해도 관계없다

 

 

인라인 스타일

리액트에서 DOM 요소에 스타일을 적용할 때는 반드시 Objec 형태로 사용해야 한다

또한, Property를 정의할 때 - 문자를 없애고 카멜 표기법(camelCase)로 작성해야 한다

위와 같이 스타일을 적용하는 것 또한 자바스크립트 문법처럼 객체로 전달할 수 있다

이 외에 class 또한 JSX에서는 className으로 설정해주어야 한다

class로 한다고 해서 스타일이 적용이 안되는거나 동작하지 않는건 아니다

하지만 브라우저 상에서 콘솔을 보면 경고 메시지가 출력되기 때문에 변환 후 사용하자

 

 

 

닫힌 태그

리액트에서는 반드시 열린 태그 뒤에는 닫힌 태그가 위치해야 한다

닫힌 태그가 없을 시 오류를 발생시킨다

<Component />

특별한 내용이 태그 안에 들어가지 않는 경우 리액트에서는 위와 같이 표현한다

이러한 형태를 self-closing 태그라고 하며, 선언과 동시에 닫을 수 있는 태그

 

 

 

주석

JSX 안에서는 주석을 처리할 때 또한 자바스크립트 문법을 표현하는 {/* */}안에 작성해야 한다

이와 같이 주석 처리가 되지 않고 전부 화면에 출력되어 버린다

 

올바른 주석의 형태