React

JSX 마크업

Function의 return 영역

React API에서 .createElement()의 type은 하나만 가질 수 있기 때문에,
형제 요소가 있을 경우, 하나의 요소로 감싸서 return해야 한다.

• JSX 마크업에서 형제 <React.Fragment> 또는 <>를 사용하는 이유이다.
• 상위 요소 없이, 배열([ ])로 감싸서 key를 설정하고 return해도 된다.
• key는 요소들을 식별하기 위해 사용한다.

Directory에서 이미지 등을 담는 폴더는 public과 assets가 있다.

• public 폴더에 자주 바뀌지 않는 정적 자원을 담는다.
  👉 import 없이 불러올 수 있다.
• assets 폴더에 자주 바뀔 수 있는 자원을 담는다.
  👉 자주 바뀌는 이미지는 캐싱된다.
  👉 이미지를 사용할 때, 경로를 동적으로 설정할 때에는 파일의 경로를 import한다.

import 파일이름 from '경로/파일.확장자명';

속성(props)

이미 정의된 표준 HTML 요소에 설정할 수 있는 속성은 정해져 있지만, 사용자가 정의한 Component에는 어떤 속성이라도 설정할 수 있다.

• 속성을 사용하면 Component를 분리할 수 있다.
• 속성은 Component의 유일한 매개변수이다.
  👉 일반적으로 props는 구조 분해 할당하여 사용한다.
  👉 상위 Component에서 props를 받아 사용할 때, 전개구문({...props})을 사용할 수도 있다.
• JSX 마크업 요소가 중첩된 경우에, 상위 요소에서 하위요소에 대한 별도의 마크업 없이 children 속성을 사용하여 하위 요소의 자리를 만들어둘 수 있다.
• props는 변경할 수 없고, 상호작용이 필요한 경우에는 State를 사용한다.

조건부 렌더링

null을 반환하면 아무것도 렌더링하지 않는다.