클라이언트
React로 웹앱을 만드는 맥락에선 클라이언트가 브라우저가 되겠네요!
결국 사용자는 브라우저를 통해 웹페이지를 보게 될 텐데, 개발자에겐 로딩 시간을 줄이고 이용 편의성을 키우기 위한 고민이 필요하게 됩니다.
아래는 Server Side Rendering과 Client Side Rendering에 대한 모식도인데, 지금 알아야 할 내용은 아닌 것 같지만 나중에 공부하기 위한 책갈피 정도로 남겨보아요
컴포넌트
컴포넌트는 JavaScript의 함수와 같이, 재사용할 수 있는 코드 블럭인데, HTML(**JSX)을 반환한다는 특징이 있다. 크게 Class Component와 Function Component 두 가지 방법으로 만들 수 있다. 컴포넌트 이름은 대문자가 컨벤!
+참고
In older React code bases, you may find Class components primarily used. It is now suggested to use Function components along with Hooks, which were added in React 16.8. There is an optional section on Class components for your reference. — w3schools.com
Function Component(함수형 컴포넌트) 작성하기
import React from 'react'; //이 부분은 React17부터 필요없어졌다!
function Box(props) {
return (
<div className="box">
콤프 짱
-{props.name}
</div>
)
}
export default Box; //default 붙여주면 나중에 import할때 { Box } 이렇게 브라켓 씌울 필요x
요런 식으로 function을 작성하여 컴포넌트를 짜는 방식이 있다. props를 통해 property값을 넘겨받을 수 있고, return 부분에서 HTML(**JSX)를 반환한다. tmi..이때 한번에 한 개의 root element만 반환할 수 있기 때문에 여러 개의 HTML element를 반환하고 싶다면 하나의 div로 묶어줘야 된다. function component를 이용할 경우 굳이 div로 container를 만들지 않고도 fragment라는 기능을 이용하면 간편하다!
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Box />);
