React 공식 문서 정리 - 1

1. React Component는 HTML Markup을 사용할 수 있는 JavaScript 함수임.

2. Component 내부에서 다른 Components를 렌더링할 수 있지만, 정의는 하지 말 것.

3. JSX 규칙: return 시에 single parent tag로 wrap되어 있어야 함.
   • 얘도 결국 JavaSCript 객체가 되고, JavaScript에서는 한 번에 두 개의 객체를 return할 수 없기 때문.

4. JSX 내부에서 {}로 JavaScript를 사용 가능한 공간은 두 곳.
   1. JSX 태그 내부의 텍스트
   2. props를 전달하는 부분에서 '=' 다음 부분.

5. 특별한 props인 children.
   • JSX에서 Component prop으로 전달하는 것 말고 태그 내부에 중첩하는 경우, 그 요소들을 children으로 받을 수있음.

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

에서,
  
<Avatar
	size={100}
	person={{ 
		name: 'Katsuko Saruhashi',
		imageId: 'YfeOqp2'
	}}
/>

부분이 children이 됨.

6. props는 불변이다.
   • component에서 props를 변경해야 하는 경우, 상위 component에서 새 객체를 전달하도록 요청해야 함.
   • 그러니까 props가 바뀌어 내용이 달라진 component는 사실 다른 객체.
   • 개념적으로 new를 두 번 한 것과 같음.

7. 조건부 연산자에서, 왼쪽 항은 bool이여야 함. 만약 0인 경우, 전체가 0이 됨.

messageCount && <p>New messages</p>

messageCount가 0이라면, 0이 렌더링 됨.

8. 변수에 JSX를 넣을 수 있음.

9. map 내부의 JSX 요소에는 항상 key가 필요함.
   • key는 unique해야 하고, 변경되면 안 됨.
   • index를 사용하는 것은 지양해야 함. 실제로 key를 지정하지 않으면 react는 index를 사용함.
   • componenet에 지정된 key는 props로 전달되지 않음. react 자체에서만 key로 사용됨.

10. Pure Components
    • 호출되기 전에 존재했던 객체, 변수를 변경하지 않음. 본인 내부에서 일어나는 일만 신경씀.
    • 동일한 입력에 대해 항상 동일한 출력을 뱉음.
    • component를 설계할 때에는 상태를 생각하고 서로 독립적이게 만들자.
    • 본인이 받은 입력에 대해서 output을 내는 형태로 구현하기.
    • 만들기 전에 어떤 Component에서 어떤 상태가 필요한지 먼저 파악하기.

11. StrictMode
    • component를 두 번 호출하여 purity를 위반하는 component를 찾게 도와줌.

---

출처

https://react.dev/learn/describing-the-ui