React 기초 정리(JSX)

JSX(JavaScript XML)란?

• JSX는 자바스트립트의 확장 문법이다. (react로 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다 .) JSX 형식을 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 괴는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
  • 리액트(React)에서 UI를 표현할 때 쓰는 문법.
  • 자바스크립트의 확장문법, XML과 매우 비슷하게 생김.

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

   • 하나의 요소로 감싸줘야하는 이유 → Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문.

     ```jsx
     import React from 'react';
     
     // 잘못된 코드
     function App(){
     	return(
         	<h1>Hello</h1>
             <h2>잘못된 코드</h2>
         )
     }
     
     // 올바른 코드
     function App(){
     	return(
         	**<div>**
               <h1>Hello</h1>
               <h2>올바른 코드</h2>
             **</div>**
         )
     }
     
     export default App;//=====================================================
     
     // div요소를 사용하고 싶지 않을 때 Fragment라는 기능 사용
     // 코드 상단 import 구문에서 react 모듈에 들어있는 Fragment라는 컴포넌트를 추가로 불러오기
     
     import React, {Fragment} from 'react';
     
     function App(){
     	return(
         	<Fragment>
               <h1>Hello</h1>
               <h2>Is it working well?</h2>
             <Fragment>
         )
     }
     
     *// Fragment는 다음과 같은 형태로도 표현할 수 있다.*
     
     function App(){
     	return(
         	<>
               <h1>Hello</h1>
               <h2>Is it working well?</h2>
             <>
         )
     }
     
     export default App;
     ```

     ---

   1. JSX 내부에서 코드를 {}(중괄호)로 감싸면 자바스크립트 표현식을 작성할 수 있다.

      ```jsx
      import React from 'react';
      
      // 자바스크립트 표현
      function App(){
      	const name = 'react';
      	return(
          	<>
                <h1>Hello! **{name}**</h1>
                <h2>Is it working well?</h2>
              <>
          )
      }
      
      export default App;
      ```

      ---

   2. JSX 내부의 자바스크립트 표현식에서 if문 사용이 불가능하다. 따라서 조건문 필요 시 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, {} 안에 삼항 연산자를 사용한다.

      ```jsx
      import React from 'react';
      
      // 자바스크립트 표현
      function App(){
      	const name = 'react';
      	return(
          	<div>
              	**{name === 'react'? (<h1>This is react</h1>) : (<h2>This isn't react</h2>)}**
              </div>
          )
      }
      
      export default App;
      ```

      ---

   3. 특정 조건을 만족할 때 만 내용을 보여주는 상황, 즉 만족하지 않을 때 렌더링을 하지 않아야 하는 상황에서 AND 연산자를 사용할 수 있다.(코드 길이가 더 짧아진다.)

      ```jsx
      import React from 'react';
      
      // AND 연산자
      function App(){
      	const name = 'rreact';
      	return(
          	<div>
              	**{name === 'react' && <h1>It's correct</h1>}**
              </div>
          )
      }
      
      export default App;
      //코드 실행 시 브라우저에 아무것도 나타나지 않는다.
      ```

      ---

   4. JSX에서 쓰이는 화살표 함수 (arrow function)

   • 화살표 함수(arrow function)은 ES6에 추가된 표현식을 사용하는 함수로 화살표 기호 => 를 사용.
     • 기존 함수 표현법

       function add(first, second){
         return first + second;
       }
       
       var add = function(first, second){
         return first + second;
       };
       //둘 다 add 라는 함수 명이며 first 와 second를 더한 값을 반환 한다.

   • 화살표 함수는 익명 함수를 선언하여 변수에 대입하는 방법과 유사하다

     let add = (first,second) => {  // () 안에 파라미터 first,second
     	return first + second;       // first + second 반환
     };
     
     let add = (first,second) => first + second;  //바로 반환
     
     let addAndMultiple = (first,second) => ({ add: first + second, multiply: first * second});  //  객체로 반환

     • () 안에는 기존 함수에서 사용하던 파라미터를, =>다음 {} 안에는 return하고 싶은 내용을 적으면 된다.
   • 기존 함수형과 화살표 함수의 코드 차이

      ```jsx
      function addNumber(num) {
        return function (value) {
          return num+value;
        };
      }
      
      **let addNumber = num => value => num + value;  //**위의 함수를 아래의 함수로 간결하게 표현 할 수 있다.
      ```
      

     ---

     React Components란? (클릭)