[React] 📚 리액트 기본 문법과 컴포넌트 소개

📋 기억하고 싶은 내용

📌 JSX

• JSX는 HTML보다는 JavaScript에 가깝기 때문에, ReactDOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
  • 예를 들어, JSX에서 class는 className가 되고, for는 htmlFor가 된다.
• 태그가 비어있다면 XML처럼 />를 이용해 바로 닫아주어야 한다.
• JSX 표현식을 중괄호를 사용해서 표현할 수 있고, JSX 자체가 표현식이기 때문에 return() 문으로 처리할 수 있다.

📌 조건부 렌더링

• return() 문 내에서는 if-else 구문 대신 삼항 연산자로 표현해야 한다.
• return() 문 내에서는 if 구문 대신 논리 연산자로 표현해야 한다.

  JavaScript에서 true && expression은 항상 expression으로 평가되고, false && expression은 항상 false로 평가된다. 따라서 && 뒤의 엘리먼트는 조건이 true일 때 출력되고, false라면 React는 무시하고 건너뛴다. 하지만, falsy 표현식을 반환하면 && 뒤에 있는 표현식은 건너뛰지만, flasy 표현식이 반환된다.

📌 Components

// 함수 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 클래스 컴포넌트
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

📌 Props

• 부모 컴포넌트가 자식 컴포넌트에게 값을 넘겨주고 싶을 때 props를 활용한다.
• props는 객체다.
• props는 읽기 전용이다.
  • 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.
• props의 값이 없다면 true가 기본값이다.
• Destructuring을 하면 props를 생략할 수 있다.
• 넘겨줄 값들을 객체로 만들어 Destructuring 하면 코드를 깔끔하게 작성할 수 있다.

function App() {
  const info = {
    firstName: "Hana",
    lastName: "Jeong",
    withImg: true,
  };
  return (
    <div className="App">
      <Header title={"Learn React A"} />
      <Welcome {...info} />
    </div>
  );
}

📌 props.children

• props.children은 컴포넌트의 여는 태그와 닫는 태그 사이의 내용을 포함한다.

props.children 활용

1. 사용자 정의 컴포넌트가 일반적인 html 태그의 구조와 비슷한 경우

export default function Button(props) {
	return <button onClick={props.handleClick}>{props.children}</button>
}

<Button onClick={() => alert("submit")}>제출하기</Button>

2. 컴포넌트에 다른 컴포넌트를 전달해야 하는 경우 props.children으로 넘기는 경우가 일반적이다.

🔗 참고 래퍼런스

• JSX 소개 - React Docs
• 조건부 렌더링 - React Docs
• Components와 Props - React Docs
• props.children - React Docs