[React] 조건문과 반복문(map) , toggle 사용하기

조건문(삼항연산자)

 

React는 JSX를 쓰기 때문에, JSX 문법을 사용해서 html과 js를 혼합해서 사용한다.

JSX 내부의 자바스크립트 표현식에선 if문을 사용할 수 없다. 따라서 삼항연산자를 사용하게된다.

 

삼항연산자

 조건식 ? 참 : 거짓

 

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
 
 
function App() {
 
  let [modal, setModal] = useState(false);
 
  return (
    <div className="App">
      <button onClick={function () {
        setModal(!modal)
      }}>모달</button>
 
      {
        modal == true ? <Modal /> : ''
      }
 
    </div>
  );
}
 
function Modal() {
  return (
    <div className='modal'>
      <h4>컴포넌트 예제</h4>
      <p>내용1</p>
      <p>상세내용</p>
    </div>
  )
}
 
export default App;
 

react 안에 있는 html 문법에서 if() 를 쓸 수는 없으므로, {  }  안에 삼항연산자를 이용해 해당 기능을 대신 처리한다.

위 코드에서 useState를 사용해 모달 기능을 구현한 예시가 있다.

 

 

모달을 클릭하면 컴포넌트 예제 모달창이 나타났다 사라졌다 할 수 있게된다.

---

반복문(map)

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
 
function App() {
  return (
    <div className="App">
      {
        [1, 2, 3].map(function () {
          return 1;
        })
      }
    </div>
  );
}
 
export default App;
 

 

위와 같이 반복문 또한 { } 태그 안에 map을 사용해서 나타낼 수 있다.

[1,2,3].map 은 3번 반복하라는 뜻이다. 숫자가 어떤 숫자가 들어가든 공간 쉼표( , )에 따라 반복수가 정해진다.

function 인자에 i를 넣게 되면 반복 한번 돌때마다 [1, 2, 3]의 위치에 따라 하나씩 반환한다.

만약 [1, 2223, 9] 였다면, 122239가 나타날 것이다.

이렇게 return 값으로 ( ) 소괄호 안에 html문을 넣어 반복 시켜줄 수도 있다.

위에서 보다시피 useState로 문자 배열에 있는 값들을 직접 넣어서 반복시켜줄 수도 있다.

뿐만 아니라, 파라미터를 두개까지도 넣어줄 수 있다. k는 반복 횟수에 따라 숫자로 나타내주는데,

0부터 시작한다.