[React] React 왕기초 문법 정리 1(아니 이것도 정리한다고?)

React의 완전 기초 문법들을 정리해보려고 합니다.

기초 문법들을 제가 공부한다는 느낌으로 같이 기록 남길 겸..? 공유하는 목적으로 작성합니다.(아주 간단히!!)

 

 

 

(문법 정리 목록)

• export -> import
• 동치 연산자
• if, else
• 삼항 연산자
• setState
• ...props
• object.keys(values)
• `${변수사용}` ( 따옴표 아님)

 

---

 

1. export -> import

React는 라이브러리이기 때문에 다른 라이브러리를 불러오거나 할 수 있습니다. 혹은 다른 파일을 불러오기도 하는데 이때 사용하는 것이 export와 import입니다. python 같은 경우는 import로 파일 경로를 입력하거나 모듈을 사용할 때 import만 입력하면 된다고 하면 React는 import 할 파일에서 export로 처리를 해주어야 합니다.

 

export : 변수, 함수, 클래스 앞에 작성하여 모듈의 기능을 외부에서 사용할 수 있도록 내보내 주는 것

import : export 된 모듈들을 내부에서 사용할 수 있도록 가져오는 것

 

 

import React from "react";

function FilterButton() {
  return (
    <button>
      //
    </button>
  );
}

export default FilterButton;

간단한 함수 기능을 작성하고 export로 내보낸 다음

import FilterButton from "./components/FilterButton";

위의 형식으로 import를 해주면 작성한 함수의 기능을 사용할 수 있습니다.

 

---

 

 

2. 동치 연산자

동치 연산자는 ==, ===을 의미합니다. 많은 분들이 ===보단 ==을 많이 사용하셨기에 어떤 점이 차이가 있는지 모르시는 분들도 꽤나 있으실 거라 생각합니다.

 

먼저, ==은 Equality 연산자로 연산이 되기 전에 피연산자들을 먼저 비교할 수 있는 타입으로 변환시키는 것입니다.

true == 1                //true
123 == '123'             //true
undefined == null        //true
null == false            //false
true == 5                //false
'true' == true           //false

===은 Identity 연산자로 ==연산자와는 반대로 형 변환을 하지 않은 상태로 연산을 하기 때문에 정확한 true, false값을 연산하고 싶을 때 사용합니다.

true === 1               //false
123 === '123'            //false
undefined === null       //false
345 === 345              //true

 

 

---

 

3. if, else

function Component() {
  if ( true ) {
    return <p>true 일 경우</p>;
  } else {
    return null;
  }
}

 

if , else형식은 위의 형식처럼 return으로 전체를 내뱉는? 식으로 사용을 하게 됩니다.

이러한 형식이 너무 지저분해 보이기도 하여 사용하는 것이 삼항 연산자입니다.

 

---

 

4. 삼항 연산자

function Component() {
  return (
    <div>
      {
        1 === 1 ? <p>true일 경우</p> : null
      }
    </div>
  )
}

삼항 연산자의 형식은 위 같은 형식으로 "조건문? 조건문이 true일 때:조건문이 false일 때"로 쓰이게 된다.

물론 아래 코드처럼 중첩 사용으로도 가능하다

function Component() {
  return (
    <div>
      {
        1 === 1 ? <p>true 일 경우</p> : ( 2 === 2  ? <p>안녕</p> : <p>반갑</p> )
      }
    </div>
  )
}

 

 

 

목록 5번부터는 2탄으로 이어서~