React 기본

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는 왜 사용하는 것일까?

1. 데이터 흐름 : React에서 데이터 흐름은 단방향적이다. 즉, 데이터는 부모 컴포넌트에서 자식 컴포넌트로 흐르는 구조이다. 이로써 데이터 흐름이 예측 가능하고 추적하기 쉬워지며, 디버깅이나 테스트 시에 유용하다.
2. 컴포넌트 재사용성: props를 사용하면 재사용 가능한 컴포넌트를 만들 수 있다. 컴포넌트에 값을 하드코딩하는 대신, props를 사용하여 동일한 컴포넌트에 다른 데이터를 전달함으로써 컴포넌트를 동적이고 재사용 가능하게 만들 수 있다.
3. 관심사의 분리 : props를 사용하면 컴포넌트가 더 독립적이고 캡슐화된 형태가 된다. 컴포넌트는 앱의  다른 상태를 알 필요가 없으며, 자신의 데이터를 표시하고 자체 상태를 처리하는 데 집중할 수 있다.
4. 컴포넌트간의 통신 : 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.

// 이렇게 출력이 된다.