[React] 화살표 함수의 반환

JSX에서 화살표함수 반환 부분에 {} 를 사용하면, 명시적으로 반환문을 작성해야 합니다.

1. 하나의 요소를 반환하는 경우

1-1. (명시적인 반환) {} 중괄호 + return 키워드를 사용하여 반환

sel_data.map((x, i) => {
  return <li className={i == 0 ? "on" : ""} key={i}></li>;
});

1-2. (축약된 형태) () 소괄호로 감싸서 반환(이 경우 return키워드 작성x)

sel_data.map((x, i) => (
  <li className={i == 0 ? "on" : ""} key={i}></li>
));

 

2. 여러 요소를 반환하는 경우

2-1. (명시적인 반환) {} 중괄호 + return 키워드 뒤 () 소괄호로 감싸서 반환 

sel_data.map((x, i) => {
  return (
    <>
      <li className={i == 0 ? "on" : ""} key={i}></li>
      <li className={i == 0 ? "on" : ""} key={i}></li>
    </>
  );
});

2-2. (축약된 형태) () 소괄호로 감싸서 반환(이 경우 return키워드 작성x)

sel_data.map((x, i) => (
  <>
    <li className={i == 0 ? "on" : ""} key={i}></li>
    <li className={i == 0 ? "on" : ""} key={i}></li>
  </>
));