JSX 기본 내용 정리

import {React, useState, useEffect} from 'react';

export default function AddCount() {
const [count, setCount] = useState(0)

useEffect(() => {
alert("안녕하세요")
})


return (<p onClick={() => setCount(prev => prev + 1)}>`current Count : ${count}`</p>)
}​

import React from 'react';

export default function HelloWorld() {
	return (
    <h1>hello World</h1>
    )
}

리액트 함수형 컴포넌트의 기본형이다.

 

HelloWorld라는 컴포넌트인데

리액트 컴포넌트에서 주의사항은 첫글자는 무조건 대문자여야한다.

 

코드를 살펴보면 HelloWorld라는 함수형 컴포넌트를 공유하고

h1태그 안에 hello World라는 텍스트를 반환한다.

 

return문 안에서 보통 1개의 태그만 반환하는데

여러개를 반환하고 싶다면 <fragment>태그를 이용하면 된다.

<fragment></fragment>로 써도 되지만

간략하게 <></>라고 써도 된다.

<>
<h1>Hello</h1>
<h2>This is h2</h2>
</>

이런 식으로 return안에 넣어주면 된다.

 

State 상태 함수

React 함수형 컴포넌트에서 상태정보를 가지고 나타내야 할 때가 있다.

그럴땐 useState라는 React함수를 사용하면 상태값을 저장할 수 있다.

useState는 state변수와 state를 변하게 만드는 set함수를 반환한다.

코드로 나타내면 아래처럼 쓸 수 있다.

import {React, useState} from 'react';

export default function AddCount() {
const [count, setCount] = useState(0)



return (<p onClick={() => setCount(prev => prev + 1)}>`current Count : ${count}`</p>)
}

const로 count변수와 count변수의 값을 바꿔서 적용해줄 setCount함수를 선언했다.

useState안에 0이 들어간 이유는 초기값을 지정해준 형태이다.

 

return된 값을 보면 p태그 안에 백틱키(`)를 사용해서 text와 변수를 함께 써주고 있다.

${count}안에는 현재 count의 값이 들어간다.

 

p tag를 클릭하면 setCount가 동작하도록 했는데 이전 값을 가져와서 +1을 해주도록 설정했다.

 

setCount안에 setCount(count + 1)을 쓰는 것이 일반적이지만, setCount에서 이전 값을 반환해주는 콜백함수도 있기 때문에 단순히 이전 값에서 숫자 1만  증가시키기 위함이라면 prev값을 가져와 1을 더해주는 것이 더욱 정확하다.

 

생명주기 effect함수

import {React, useEffect} from 'react';

export default function Hello() {

useEffect(() => alert("안녕하세요"))

return <h1>Hello!</h1>
}

useEffect는 mount나 unmount가 일어났을때 동작한다.

처음에 Hello가 render되면 useEffect안에 있는 alert가 동작한다.

이후에 화면에서 return된 h1 Tag를 볼 수 있다.

 

useEffect는 언제 동작할지 정할 수 있는데 딱 한 번 만 동작하게 하려면

두번째 인자에 빈 배열을 넣어주면 된다.

 

그리고 특정 state가 변할 때마다 동작하게 하고 싶다면 두번째 인자 배열 안에 해당 state를 넣어주면 된다.

 

마지막으로 closer동작 즉 render된 컴포넌트가 닫힐 때 effect를 동작시킬 수 있는데

useEffect안에 return문을 넣어주면 컴포넌트가 닫힐 때 동작한다.