React Syntax

---

🧩 React Syntax란?

정의

React Syntax는 React 컴포넌트를 작성할 때 자주 사용하는 JavaScript 표현과 JSX 패턴을 정리한 문법 모음이다.

컴포넌트 안에서 데이터를 가공하고 화면을 조건에 따라 바꾸는 방식이 핵심이다.

🧪 기본 예시

export default function App() {
  const [message, setMessage] = useState("Hello");

  return (
    <>
      <p>message : {message}</p>
    </>
  );
}

🧵 문자열 템플릿

• 문자열 안에 변수를 넣어 표현할 때 사용한다.

const myName = "david";
console.log(`이름은 ${myName} 입니다`);

📚 배열 처리

map

• 배열의 각 요소를 가공해서 새 배열을 만든다.
• 리스트 렌더링에서 자주 사용한다.

const ages = [30, 40, 5];
const newAges = ages.map((age) => age + 1);

console.log(ages);
console.log(newAges);

filter

• 조건이 true인 요소만 남긴다.
• 검색 결과나 조건별 목록을 만들 때 자주 사용한다.

const infos = [
  { name: "김창수", age: 30, family: ["할머니", "아내", "아들"] },
  { name: "이민주", age: 24, family: ["남편"] },
  { name: "박종식", age: 58, family: ["아들", "딸", "손자"] },
];

const adults = infos.filter((person) => person.age > 25);

clone

• 배열을 복사한 뒤 상태를 갱신할 때 자주 사용한다.
• React에서는 원본 배열을 직접 바꾸지 않는 습관이 중요하다.

function copySubTitle() {
  let copy = [...goodCount];
}

⚙️ 조건문

if else

export default function App() {
  const [isActive, setIsActive] = useState(false);

  let content;

  if (isActive) {
    content = <div>짠</div>;
  } else {
    content = <div>안보임</div>;
  }

  return (
    <>
      <button onClick={() => setIsActive(!isActive)}>토글 버튼</button>
      {content}
    </>
  );
}

삼항 연산자

export default function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <>
      <button onClick={() => setIsActive(!isActive)}>토글 버튼</button>
      {isActive ? <div>짠</div> : <div>안보임</div>}
    </>
  );
}

&&

• 조건이 true일 때만 화면에 보여준다.
• 간단한 조건부 렌더링에 유용하다.

export default function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <>
      <button onClick={() => setIsActive(!isActive)}>토글 버튼</button>
      {isActive && <div>짠</div>}
    </>
  );
}

📌 정리

• React Syntax는 JSX 안에서 자주 쓰는 표현 패턴을 익히는 문서다.
• map, filter, 배열 복제, 조건부 렌더링을 자주 본다.
• React-Keyword, React-JSX, React-Component와 함께 보면 흐름이 잘 잡힌다.

---

연결문서

• React-Keyword
• React-JSX
• React-Component
• React-EventHandler
• React-Props
• React-LifeCycle