JSX문법
JSX문법을 사용한 코드와 아닌 코드를 비교해보자. 리액트에서는 JSX를 함께 사용할 것을 권장한다. 대부분의 사람들이 자바스크립트 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각하기에 JSX를 권장한다.
JSX 문법 사용 O
return (
<div
onClick={() => setFollowing(!following)}
style={following ? followingBtnStyle : followBtnStyle}
>
{following ? "following" : "Follow"}
</div>
);JSX 문법 사용 X
return React.createElement(
"div",
{
onClick: () => setFollwing(!follwing),
style: following ? followingBtnStyle : followBtnStyle,
},
following ? "following" : "Follow"
);
컴포넌트(함수형과 클래스형)
컴포넌트는 개념적으로 자바스크립트 함수와 유사하다. 컴포넌트를 정의하는 간단한 방법은 자바스크립트 함수를 작성하는 것이다. 또는 ES6 class를 사용하여 컴포넌트를 정의할 수 있다.
함수형 컴포넌트
- state를 사용할 수 없다. (Hooks로 해결, useState)
- JSX를 return문을 사용해서 반환한다.
- 생명 주기 함수를 작성할 수 없다. (Hooks로 해결, useEffect)
클래스형 컴포넌트
- ES6 class를 사용한다.
- Component로 상속 받는다.
- render 함수를 사용해서 JSX를 반환한다.
- props를 조회할 때 this 키워드를 사용한다.
- state, lifeCycle 관련 기능사용이 가능하다.
props
props는 읽기 전용으로 자체를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 사용할 때는 순수 함수처럼 동작해야 한다. 예를 들어 props.number = 42 의 방식은 안 된다. 어떤 값을 수정해야 한다면 state를 사용해야 한다.
// 순수 함수, 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수
function sum(a, b) {
return a + b;
}
state와 useState
아래 코드를 브라우저에서 실행하면 버튼을 아무리 눌러도 카운트는 변하지 않고 0으로 보인다. count를 변경했더라도 재렌더링을 하지 않는다. 하지만 리액트에서는 이 문제를 해결해야하는데 상태값을 관리하기 위해서 state가 나오게 된다.
import React from "react";
export default function Counter() {
let count = 0;
return (
<div>
<button onClick={() => count++}>+1</button>
<br />
Counter : {count}
</div>
);
}함수 컴포넌트는 함수다. 함수 컴포넌트에서 내부적으로 상태를 관리해야 하는 일이 필요한데 여기서 필요한 것이 useState라는 React-hook이다. useState에서는 state와 setState를 가지고 있는데 setState가 컴포넌트의 re-rendering을 발생 시킨다.
import React, { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count++)}>+1</button>
<br />
Counter : {count}
</div>
);
}setState를 사용할 때 주의할 필요가 있다. 불변성을 지키지 않고, 메모리 영역의 값을 직접 변경하면 리액트는 state가 바뀌었다고 인지하지 못한다. 리액트는 얕은 비교를 하기 때문이다. 자바스크립트에서 boolean, number, string은 원시 타입으로 불변성을 가지고 있다. 즉 변수에 원시 타입의 값을 할당하면 메모리에 값 자체가 저장된다. 하지만 Object는 참조 타입으로 불변성을 가지고 있지 않다. 그래서 변수에 참조 타입의 값을 할당하면, 메모리 값이 담긴 주소가 저장된다.
그래서 참조 타입에서 해결하기 위해서는 스프레드 연산자를 통해서 다른 주소의 Object를 전달하여 새롭게 리렌더링하도록 한다.
댓글