[React] 리액트 기초부터(2)

JSX

html 같지만 Javascript로 변환된다.

HTML과 비슷하지만 지켜야할 규칙이 몇가지가 있다.

1. 꼭 닫혀있어야 하는 태그

2. 두개 이상의 element는 하나의 element로 감싸져 있어야한다. -> Fragment라는 기능 생김 (불필요한 extra div 없음)

 

 

JSX 안에 javascript 값 사용하기

import React, {Component} from 'react';

class App extends Component{
	render(){
    	const name = 'react';
        return(
        	<div>
            	helle{name}!
            </div>
        );
    }
}

export default App;

 

const 와 let

function foo(){
	var a = 'hello';
    if (true){
    	var a = 'bye';
        console.log(a);   //bye
    }
    console.log(a);	//bye
}

function foo(){
	let a = 'hello';
    if(true){
    	let a = 'bye';
        console.log(a);  //bye
    }
    console.log(a);	//hello
}

const와 let은 scope가 block단위로 되어있다.

const는 한 번 선언 후 고정적인 값에 사용한다.

let은 유동적으로 변하는 값에 사용한다.

 

 

조건부 렌더링

JSX 내부에서는 삼항 연산자 또는 AND 연산자를 사용한다.

반면에 if문 사용 불가능 (사용하기 위해서는 IIFE(즉시 실행 함수 표현)을 사용해야한다.)

 

삼항연산자 예제)

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'senii';
    return (
      <div>
        {1 + 1 === 2 ? <div>맞아요!</div> : <div>틀려요!</div>}
      </div>
    );
  }
}

export default App;

 

AND 연산자 예제)

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'senii';
    return (
      <div>
        {name === 'senii' && <div>아엠유얼세니</div>}
      </div>
    );
  }
}

export default App;

조건이 여러개 일때 예제)

import React, { Component } from 'react';

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function(){
            if(value === 1) return <div>1이다!</div>
            if(value === 2) return <div>2이다!</div>
            if(value === 3) return <div>3이다!</div>
            return <div>없다</div>
          })()
        }
      </div>
    );
  }
}

export default App;

함수 표현은 밑에 코드와 같은 형식으로 표현 가능하다.

(() => {
	if(value === 1) return <div>1이다!</div>
	if(value === 2) return <div>2이다!</div>
	if(value === 3) return <div>3이다!</div>
	return <div>없다</div>
})()

 

 

*이 글은 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌를 토대로 공부를 하며 작성하였습니다.