[리액트] 공부 일지-1

useState 사용방법

let [값이름, 값변경함수이름] = useState(값)

 

state에는 Array, Object 자료형 모두 넣어도 됨

 

변수가 변경될 때 자동으로 html을 재렌더링하게 만들고 싶으면

state를 사용해야함

 

 

리액트에서 반복문 사용하는 법

var 어레이 = [2,3,4];
var newArray = 어레이.map(function(a){
  return a * 10
});

map함수를 사용하여 반복문 사용

위 코드를 실행하면

newArray에는 [20,30,40]이 저장됨

 

만약 일반 반복문(for)을 사용하고 싶다면

function App (){

  function 반복문(){
    var array1 = [];
    for (var i = 0; i < 3; i++) {
      array1.push(<div>안녕</div>)
    }
    return array1
  }
  return (
    <div>      
      { 반복문() }
    </div>
  )
}

위의 코드처럼 따로 일반 함수를 만들어서

array 선언해주고 for문으로 array에 값을 삽입해준다.

그리고 array를 리턴해주고 JSX안에서 함수를 실행해주면 성공이다.

(뭔가 파이썬의 반복문이랑 비슷한 느낌이다)

 

컴포넌트 사용으로 코드 간략화(?) 하기

*리액트에서 조건문 사용법(삼항연산자)

  let [modal, modal변경] = useState(false);

// 삼항연산자
{
        modal===true
        ? <Modal></Modal>
        : null
      }

function Modal(){
  return (
    <div className='modal'>
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

 

일반 함수를 선언해주고 return 안에 출력하고 싶은 내용들을 넣어 조건문 안에서도

사용 가능하다.