1. Component
- Reac의 가장 큰 특징이자 장점은 Component-based, 컴포넌트 기반이라는 것이다. 컴포넌트란 하나의 의미를 가진 독립적인 단위의 모듈로 나만의 HTML이라고 생각할 수 있다. UI의 일부를 제어하는 재사용 가능한 코드이다. 또 JavaScript에서 함수의 역할을 React에게서 담당하는 것과 같다.
- 함수형 컴포넌트
- 클래스 컴포넌트
1-1 함수형 컴포넌트
function Welcome(props) {
return <h1> Hello, {props.name} </h1>;
}위 예시에서 Welcome은 함수형 컴포넌트로, props를 인수로 받아 React 요소를 반환한다.
1-2 클래스 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
클래스 컴포넌트의 경우 더 복잡하고 더 많은 기능을 제공한다. render 메서드를 포함해야 한다.
*함수형 컴포넌트에서 React Hooks 사용
React Hooks는 함수 컴포넌트에서 상태와 다른 React 기능을 사용할 수 있도록 하는 함수이다. 클래스 컴포넌트로 변환하지 않고도 함수 컴포넌트에서 사용가능하다.
* useState와 useEffect Hooks 이해
useState와 useEffect는 React Hooks를 사용하는데 기본적인 역할을 한다.
- useState : 컴포넌트에 상태를 추가하는 데 사용한다. 초기 상태를 인수로 받고 현재 상태와 상태를 업데이트하는 함수로 구성된 배열을 반환한다.
const [count, setCount] = useState(0);
// 해당 예시에서 const는 현재 상태이고 setCount는 상태를 업데이트하는 함수이다.- useEffect : 이 훅은 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드와 같은 역할을 한다. 기본적으로 첫 번째 렌더링을 포함하여 모든 렌더링 이후에 실행된다.
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
// 이 예시에서 useEffect 혹은 count 상태가 변경될 때마다 문서 제목을 업데이트한다.
2. Props
props는 상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터이다. props는 객체이다. props는 읽기 전용이며, 받은 컴포넌트에서 변경해서는 안된다.
function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}위 예제에서 Alice 문자열을 Greeting 컴포넌트에 props로 전달한다.컴포넌트 내부에서는 이 props를 props.name으로 접근할 수 있다. 이러한 Props는 왜 사용하는 것일까?
- 데이터 흐름 : React에서 데이터 흐름은 단방향적이다. 즉, 데이터는 부모 컴포넌트에서 자식 컴포넌트로 흐르는 구조이다. 이로써 데이터 흐름이 예측 가능하고 추적하기 쉬워지며, 디버깅이나 테스트 시에 유용하다.
- 컴포넌트 재사용성: props를 사용하면 재사용 가능한 컴포넌트를 만들 수 있다. 컴포넌트에 값을 하드코딩하는 대신, props를 사용하여 동일한 컴포넌트에 다른 데이터를 전달함으로써 컴포넌트를 동적이고 재사용 가능하게 만들 수 있다.
- 관심사의 분리 : props를 사용하면 컴포넌트가 더 독립적이고 캡슐화된 형태가 된다. 컴포넌트는 앱의 다른 상태를 알 필요가 없으며, 자신의 데이터를 표시하고 자체 상태를 처리하는 데 집중할 수 있다.
- 컴포넌트간의 통신 : props를 통해 데이터뿐만 아니라 함수도 자식 컴포넌트로 전달할 수 있다. 이는 자식 컴포넌트가 props로 전달받은 함수를 호출하여 부모 컴포넌트에게 통신할 수 있는 것을 의미한다.
* PropTypes를 사용한 프롭스 유효성 검사
import PropTypes from 'prop-types';
function Greeting(props) {
return <h1>Hello, {props.name}</h1>;
}
Greeting.propTypes = {
name: PropTypes.string.isRequired,
};PropTypes는 JavaScript 객체의 유형을 검사하는 데 사용되는 라이브러리이다. 해당 라이브러리를 사용하여 컴포넌트가 받는 프롭스가 올바른 유형인지 확인할 수 있다.
3. State
state는 컴포넌트가 독립적으로 갖는 상태이다. 이 역시 객체의 형태로, 컴포넌트 안에서만 제어되어 보관, 관리된다.
welcome 메세지 뒤에 메세지가 렌더링 될 때의 현재 시각을 알려주는 메세지를 같이 렌더링 해보자.
class CLock extends React.Component {
constructor(props) {
super(props)l
this.state = {date : new Date()};
}
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock name="Jaon"/>,
document.getElementById('root')
);
// Clock 이라는 컴포넌트를 만들고 date라는 state를 지정해주면
// Hello, world!
// it is 오후 4:16:26.
// 이렇게 출력이 된다.'Front-End > React&Next.js' 카테고리의 다른 글
| Promise / async / await (1) | 2024.04.03 |
|---|
