react에서는 jsx라는 문법을 주로 사용하며 컴포넌트를 생성한다. jsx의 주요 문법을 정리해보자
변수명
jsx에서 변수명은 {} 중괄호 안에 넣어서 사용한다. Jsx의 중괄호 안에는 모든 javascript의 표현식을 넣을 수 있다. 반대로 표현식이 아닌 조건문 if 등은 사용이 불가능하다.
function formatName(user){
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName : "Taylor",
lastName : "Swift"};
const element = (
<h1> Hello, {formatName(user)}!
</h1>);자동 세미콜론 삽입을 피하기 위해 여러 줄은 괄호로 묶는 것이 좋다!
jsx는 표현식을 사용할 수 있지만, jsx도 엄연한 js표현식이다. 즉, if, for문에 넣을 수도 있고, 변수에 할당할 수도, 인자가 될 수도, 함수로부터 반환도 가능하다.
{}를 사용해 어트리뷰트에 표현식을 삽입할 수도 있다.
const naver = {
name : "naver",
url : "https://naver.com"}
const element = <a href={naver.url}></a> style 태그
inline style의 경우 {}안에 넣어서 작성한다. jsx에서는 -를 쓰면 안되기 때문에 "카멜 케이스"로 작성한다. 또한 속성명은 ""안에 넣어 작성한다. 또한 class는 js의 예약어기 떄문에 class대신 className을 사용한다.
<h1 className = "bigFont" style={{color:"pink", backgroundColor : "red",}}>안녕하세요</h1>보통 css는 인라인으로 작성하지 않고 index.css나 app.css같은 외부 파일을 통해 관리한다.
return문
리액트의 함수 안에는 js에서 배운 것처럼 변수와 return문이 들어간다. 변수선언문은 return문 밖에 빼주어야 한다. 또한 return문은 한줄 이상이면 ()로 묶는 것이 좋다.
중요한 포인트는 return문이 하나의 태그만을 반환하기 때문에 두 개이상의 태그를 반환하면 에러가 난다는 것이다. 따라서 return문 안에서는 그 태그들을 하나의 태그로 묶어야 한다.
참고로 <> </>도 사용 가능하다. 일반 div처럼 의미없는 태그이다.
key값
react에서 컴포넌트를 배열로 관리할 때 비슷한 컴포넌트를 수정, 삭제 등 배열을 조작할 때가 있다. 컴포넌트는 같은 형태를 가지고 있기에 구별이 쉽지 않은데, react에서 key값이 각 컴포넌트의 고유한 식별자 역할을 한다. 이 key값을 사용하면 변경사항을 최소화하면서 필요한 부분만 렌더링을 할 수 있다.
useState
useState는 상태를 관리하는 기능을 한다. 다음과 같이 쓴다.
보통 상태변경함수는 set + 상태명으로 짓는다.
const [상태명, 상태변경함수] = useState("초기값");
상태명은 시작할 때 "초기값"을 가지며 상태변경함수는 이 상태가 변경되는 것을 감지한다. 만약 초기상태에서 상태가 달라진다면 상태변경함수가 실행된다.
우선 useState문법을 쓰려면 다음과 같은 import를 해야 한다.
import { useState } from "react";다음은 useState의 예시이다. 다음과 같이 상태명은 변수 안에 넣을 수도 있으며 함수안에 들어갈수도 있다.
상태
const [mode, setMode] = useState("light");
const [time, setTime] = useState(props.time);
const msg = time < 12 ? "오전입니다" : "오후입니다";
function changeMode() {
setMode(mode === "light" ? "night" : "light");
}