[React] 리액트 기본 개념

1. JSX 표기법

함수의 반환값으로 HTML 태그 사용, 그것을 컴포넌트화하여 화면을 구성

• 반환값은 무조건 하나의 태그로 감싸져있어야함
• 여러 줄일 때는 괄호()를 활용

import ReactDOM from "react-dom";

const App = () =>{
	return <h1>안녕하세요!</h1>;
}

ReactDOM.render(<App />, document.getElementById("root"));

• 컴포넌트화 예시

src 하위에 App.js 파일 작성

export const App = () => {
	return <h1>안녕하세요!</h1>;
}

 

임포트하여 사용

import { App } from "./App";

 

2. Props

함수에 넘겨주는 인자와 같은 역할을 한다.

export const ColoredMsg = (props) => {
	const contentStyle = {
		color: props.color,
		fontSize : "20px"
	}

	return <p style={contentStyle}>{props.message}</p>;
}

// 사용 예시
<ColoredMsg color="blue" message="안녕"/>

• 특별한 props인 children 사용

export const ColoredMsg = (props) => {
	const contentStyle = {
		color: props.color,
		fontSize : "20px"
	}

	return <p style={contentStyle}>{props.children}</p>;
}

// 사용 예시
<ColoredMsg color="blue">안녕</ColoredMsg>

*children도 역시 여러 태그로 감싼 요소를 전달 가능

*분할대입을 사용하면 좀 더 축약된 코드를 작성할 수 있다.(분할 대입은 모던 자바스크립트 내용을 참고)

export const ColoredMsg = (props) => {

	const { color, children } = props;

	const contentStyle = {
		color, // props. 생략, 속성 이름과 같으면 color:도 생략 가능
		fontSize : "20px"
	}

	return <p style={contentStyle}>{children}</p>; // props. 생략
}

 

3. State

컴포넌트의 상태값. 보통 리액트에서 제공하는 useState를 사용하여 상태를 관리함.

import { useState } from "react";

사용 예시

// state 변수, 해당 state를 업데이트하기 위한 함수가 차례로 설정됨
const [num, setNum] = useState();

 

4. 재렌더링, useEffect

재렌더링: State가 변경될 때 함수 컴포넌트는 처음부터 처리가 실행됨. 이때 차이가 있는 DOM을 감지하여 업데이트를 반영하고 화면에 표시.

useEffect: 컴포넌트 수가 늘어나면 재렌더링 횟수가 늘어나는데, 그때마다 특정 처리를 실행하는 것은 비용 낭비이므로 값이 변했을 때만 실행할 수 있는 기능

import { useEffect } from "react";

• 선언

useEffect(실행하는 함수, [의존하는 값]);

• 사용 예시

export const App = () => {

	useEffect(()=>{
		alert();
	}, [num]);

	return ( 
		{ /* 생략 */}
	);
}