Component
컴포넌트는 독립적으로, 재사용가능한 코드로 관리할 수 있다. 하나의 컴포넌트에 필요한 html, css js(validation check)를 모두 합쳐서 만들 수 있다.
Component 만들기
reactsms Component를 만들고 관리하기 좋은 라이브러리 이다.
React에서는 컴포넌트를 class나 Function으로 만들 수 있다. 경우에 따라서 함수로 만들면 좋고, class로 만들어야 좋을 때가 있다.
Function형 컴포넌트 장점
- 클래스형 컴포넌트보다 선언하기가 훨씬 쉽다.
- 메모리 자원도 클래스 형 컴포넌트보다 덜 사용한다.
- 프로젝트를 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.
단점
state와 라이프사이클 API의 사용이 불가능하다. 이점은 리액트 v16.8업데이트 이후 hooks라는 기능이 도입되면서 해결되었다.
Function으로 Welcome 컴포넌트 구현하기
Function Welcome(props){
return <h1>Hello, {props.name}</h1>;
}Class로 Welcome 컴포넌트 구현하기
class로 컴포넌트를 만드려면 React.Component를 extend해서 생성한다. 컴포넌트를 생성할때 render()메서드는 무조건 정의해야하고, return도 해주어야 한다. render()메서드는 무조건 정의해야 한다는 말은 component를 만들 때 필요한 메서드가 원래 더 있다는 말이다. 그 중에 render()만 필수이다.
class Welcom extends React.Component{
render(){
return <h1>Hello, {this.props.name}<h1>;
}
}위에서 처럼 정의한 컴포넌트는 function/class이름으로 사용할 수 있다. 태그처럼 <Welcome/>으로 작성한다. 여기서 정의한 컴포넌트를 사용 할 때, 원하는 attribute를 얼마든지 추가할 수 있다. 그러면 Welcome 컴포넌트(함수)에서 parameter로 해당 attribute를 받아서 사용 할 수 있다. 이것을 props라고 한다. props는 property의 줄임말이다.
.(dot)으로 속성명에 접근가능하고, props.속성명 으로 속성 값을 가져올 수 있다.
// 1. Welcome 컴포넌트 정의
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 2. App 컴포넌트 정의
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
// 3. 화면에 React 요소 그려주기
ReactDOM.render(
<App />,
document.getElementById('root')
);- Welcome 컴포넌트 : Welcome 컴포넌트를 사용한 부모에서 name이라는 attribute를 부여했다. props.name의 값을 사용하였다.
- App 컴포넌트를 보면 div로 감싸져 있고,
<Welcome />컴포넌트를 세번 사용했다. name이라는 attribute를 부여해 주었다. - ReactDom.render함수로 React요소를 그려준다. root라는 id를 찾아
<App />컴포넌트를 그려주고있다.
모듈 내보내기 및 불러오기
모듈 내보내기 (export)
export default MyComponent;MyComponent.js의 맨 아래에 작성한다. 이 코드는 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정한다.
모듈 불러오기 (import)
이번에는 App 컴포넌트에서 MyComponent 컴포넌트를 불러와서 사용해 보자.
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent />;
};
export default App;props
props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 사용할 수 있다.
JSX 내부에서 props 랜더링
MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링 하도록 설정해 본다. props값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다. props를 랜더링 할 때는 jsx 내부에서 {} 기호로 감싸주면 된다.
(함수형으로 작성하였다.)
import React from 'react';
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다. </div>
};
export default MyComponent;state
React 컴포넌트는 컴포넌트의 상태를 저장할 수 있습니다. props와의 차이점이라면, state는 컴포넌트 내부에 존재하고 있기 때문에, 상태값 변경이 가능하다는 것입니다.
