[React] 기초 개념 (1)

요즘 공부하고 있는 내용들을 오래 기억하기 위해 정리해본다.

JSX에서는 class를 정의하기 위해서 class라는 단어를 사용하지 않고 className이라고 쓴다.
모든 HTML 속성에 대한 JSX의 네이밍 컨벤션은 카멜표기법으로, onclick 은 onClick, onchange는 onChange로 쓴다.
HTML에서 self-closing tag들이 있는데 (개행을 할때 <br>이라고 쓰거나 <br/> 이라고 써서
굳이 내용이 없는 태그들은 닫아주지 않거나 스스로 닫는 기능), JSX에서는 모든 요소들이 self-closing tag를 사용할 수 있다. 그리고 반드시 닫아줘야한다.
<br> 안됨. <br/>됨. <div/> 가능하지만 아무것도 안에 담을 수 없다.
컴포넌트는 React의 핵심이다. React에서 컴포넌츠를 생성하는 2가지 방법이 있다.
- 첫번째는 javaScript 함수를 이용하는 것. 중요한 점은 함수를 생성할 때 React는 함수 이름을 대문자로 시작할 것을 요구한다.
  컴포넌트는 여러개를 함께 담을 수 있어서 더 복잡한 HTML 페이지를 구현할 수 있다. (이게 React가 제공하는 컴포넌트 아키텍처의 메인 장점이다.)
  UI를 여러개의 세분화된 컴포넌트로 나눌 수 있고, 이 방법은 복잡한 UI를 쉽게 만들고 유지할 수 있게 도와준다.

 cont Component = function(
 	return(
    	<div>hello</div>
    );
 );

class Component extends React.Component{
	constructor(props){
		super(props);
	}
	render(){
		return(
			<div>Hello</div>
		);
	};
};

이 class에서 보며 constructor()는 super()를 정의하고 있고, super()는 부모 클래스의 constructor()를 부른다. (여기서는 React.Component가 부모 클래스이다.) 이 방법은 컴포넌트의 props이 부모와 자식 클래스 모두 통과할 수 있는 가장 좋은 방법이다.
JSX에서는 여러개의 컴포넌트를 하나로 모으기 위해 HTML 태그의 이름을 커스텀해서 사용할 수 있다.
이 커스텀한 태그를 React가 렌더링 하는데, 여기서 부모 자식 컨포넌트들의 관계가 잘 정의되어있어야 한다.

return(
	<App>
		<Nav/>
		<Board/>
		<Footer/>
	</App>
)

컴포넌트들을 구성하는 방법은 다양하다. 컴포넌트 구성은 React의 강력한 특징중 하나다.
복잡한 프로젝트 일수록 컴포넌트의 장점이 잘 발현된다.

Midnight Learner