📋 JSX란 ?
JSX(JavaScript XML)는 React에서 사용되는 자바스크립트의 확장 문법입니다. JSX는 React 애플리케이션에서 UI를 표현하기 위해 사용됩니다.
JSX는 마치 HTML과 유사한 구문을 사용하여 UI 구성 요소를 작성할 수 있게 해줍니다. JSX 코드는 React 엘리먼트를 생성하며, React 엘리먼트는 사용자 인터페이스의 구성 요소입니다.
일반적인 JSX 구문은 다음과 같습니다 ⇒ const title = <h1>Hello, World!</h1>;
JSX의 특징
- HTML과 유사한 구문: JSX는 HTML과 매우 유사한 문법을 가지고 있어 익숙한 형태로 UI를 작성할 수 있습니다.
- JavaScript 표현식 포함: {} 중괄호 안에서 JavaScript 표현식을 사용할 수 있습니다. 이를 통해 동적인 값을 JSX에 포함시킬 수 있습니다. ex ) const name = "React"; const element = <h1>Hello, {name}!</h1>;
- 속성 지정: HTML 요소에 속성을 지정할 수 있습니다. JSX에서는 속성에 값을 할당할 때 중괄호를 사용하여 JavaScript 표현식을 사용할 수 있습니다. ex ) const imageUrl = "example.jpg"; const element = <img src={imageUrl} alt="Example" />;
- JSX는 표현식: JSX는 표현식이므로 변수에 할당하고, 함수의 인자로 전달하고, 조건문과 반복문 안에서 사용할 수 있습니다. 이를 통해 동적인 UI를 쉽게 만들 수 있습니다.
- 클래스 이름 지정: class 키워드를 사용할 수 없기 때문에 JSX에서는 **className**을 사용하여 HTML 요소에 클래스 이름을 지정할 수 있습니다 ex ) const element = <div className="my-class">Hello, World!</div>;
JSX는 React 애플리케이션에서 UI를 빌드하는 강력한 도구로, 코드의 가독성을 높이고 유지보수를 쉽게 만들어줍니다. React에서 컴포넌트를 작성할 때 JSX를 활용하면 간결하고 효과적인 UI 코드를 작성할 수 있습니다.
🎈 React JSX 기본 문법
import React from 'react';
function App() {
return (
<div>
<h1>Hello, World!</h1>
<p>Hello, World에 오신 걸 환영합니다</p>
</div>
);
}
export default App;
화면에 보여지게 하고 싶은 html 태그는 꼭 return 문 안에 작성되어야 합니다. 해당 코드는 React 함수형 컴포넌트인 App을 정의하고 있습니다.
이 컴포넌트는 JSX 문법을 사용하여 UI를 정의하고 있습니다. 여기에서 return 문 안에 작성된 JSX가 컴포넌트의 출력 결과를 결정합니다.
return 문안에 작성되어야 하는 이유는 아래와 같습니다.
- UI 정의: return 문 안의 JSX는 컴포넌트가 렌더링할 UI를 정의합니다. 컴포넌트의 주된 역할은 사용자에게 보여지는 UI를 생성하는 것이기 때문에 JSX를 사용하여 UI를 정의합니다.
- 가독성: JSX를 사용하면 UI 구조를 직관적이고 가독성 있게 표현할 수 있습니다. HTML과 유사한 문법을 사용하므로, 컴포넌트의 UI가 어떻게 보이는지 빠르게 파악할 수 있습니다.
- 재사용성: JSX를 사용하면 컴포넌트를 쉽게 재사용할 수 있습니다. 여러 컴포넌트에서 동일한 JSX 구조를 사용하여 일관된 UI를 구성할 수 있습니다.
- 동적 데이터 삽입: JSX 안에서 중괄호 {}를 사용하여 JavaScript 표현식을 넣을 수 있습니다. 이를 통해 동적인 데이터를 UI에 삽입할 수 있습니다. 예를 들어, {props.name}과 같이 프로퍼티를 사용하여 동적 데이터를 표시할 수 있습니다.
- React 엘리먼트 생성: JSX를 사용하면 React 엘리먼트를 생성할 수 있습니다. React 엘리먼트는 실제 DOM 엘리먼트와 매핑되며, React가 이를 사용하여 가상 DOM을 구성하고 렌더링을 최적화합니다.
따라서 return 문 안에 JSX를 작성함으로써 React 함수형 컴포넌트는 어떻게 화면에 렌더링될지를 정의하게 되며, 이는 React의 핵심 원칙 중 하나인 "UI는 상태(state)에 의존적이어야 한다"를 충족시키기 위한 방법입니다.
💥 또 하나의 주의점은 React 컴포넌트에서 return 문 안에 병렬로 여러 개의 div 태그를 작성하면 컴파일 오류가 발생합니다. JSX는 하나의 부모 엘리먼트로 묶여있어야 하고, 그렇지 않으면 React가 컴포넌트의 렌더링을 처리할 때 모호성이 발생하게 되기 때문입니다.
✅ Destructuring 문법이란?
디스트럭처링(Destructuring)은 ECMAScript 6(ES6)에서 추가된 JavaScript 문법 중 하나입니다. 이 문법은 배열이나 객체에서 데이터를 추출하여 변수에 할당하는 간단한 방법을 제공합니다. 이를 통해 코드를 더 간결하고 가독성 있게 작성할 수 있습니다.
1. Array Destructuring
const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers;
console.log(first); // 1
console.log(second); // 2
=> 위의 코드에서 numbers 배열의 첫 번째 요소는 first 변수에, 두 번째 요소는 second 변수에 할당됩니다.
2. Object Distructuring 문법
const person = {
name: '푸바오',
age: 10,
city: 'Korea'
};
const { name, age } = person;
console.log(name); // '푸바오'
console.log(age); // 10
=> 위의 코드에서 person 객체의 name 속성은 name 변수에, age 속성은 age 변수에 할당됩니다.
3. Parameter Distructuring
const person = {
name: '푸바오',
age: 10
};
function displayAnimal({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
displayPerson(person); // 출력: Name: 푸바오, Age: 10
=> 위의 코드에서 displayAnimal 함수의 매개변수에서 객체 디스트럭처링을 사용하여 객체의 속성을 추출합니다.
Distructuring (디스트럭처링)은 복잡한 데이터 구조에서 특정 값을 추출하거나, 함수의 매개변수로 전달된 객체나 배열에서 필요한 값을 간편하게 추출할 때 유용합니다. 이를 통해 코드의 가독성을 높이고, 필요한 데이터를 쉽게 다룰 수 있습니다.
React에서의 state와 state 사용
React의 state란 컴포넌트의 상태를 저장하고 변경할 때 사용되며, 주로 사용자 인터랙션에 응답하여 UI를 업데이트하거나 비동기 작업 결과를 처리할 때 활용됩니다. React에서 state를 사용해야 하는 시점은 컴포넌트의 내부 데이터를 관리하고 동적인 UI를 구현해야 할 때입니다.
- 사용자 입력 처리: 사용자가 폼을 작성하거나 버튼을 클릭하는 등의 사용자 입력에 대한 응답으로 state를 사용할 수 있습니다. 예를 들어, 입력 필드에 사용자가 입력한 값을 state에 저장하여 렌더링할 때 사용됩니다.
- 외부 데이터 불러오기: 외부 API 호출 또는 데이터베이스에서 데이터를 불러올 때 비동기 작업의 결과를 state에 저장하여 UI를 업데이트할 수 있습니다. 데이터가 로드되면 컴포넌트의 state를 업데이트하고, 이를 기반으로 UI를 렌더링할 수 있습니다.
- 동적 UI 업데이트: 어떤 조건에 따라 UI를 동적으로 업데이트해야 할 때 state를 사용할 수 있습니다. 예를 들어, 버튼 클릭에 따라 토글되는 상태를 관리하거나, 조건에 따라 다른 컴포넌트를 렌더링하는 등의 상황에서 state를 사용할 수 있습니다.
이러한 상황에서 state를 사용하여 컴포넌트의 동적인 동작과 UI 업데이트를 관리할 수 있습니다. 단, state는 컴포넌트의 지역 상태로서 해당 컴포넌트에서만 사용될 수 있으며, 필요한 경우 props로 다른 컴포넌트에 전달할 수 있습니다.
여기서 주의할 점은 모든 데이터를 state 값으로 사용하는 것이 아니라 주로 컴포넌트 내에서 변경될 수 있는 값을 관리하기 위해 사용해야 합니다. 이 말은 컴포넌트의 상태가 변할 때만 state를 사용해야 한다는 것을 의미합니다.
즉, 사용자 입력, API 호출 결과, 컴포넌트의 내부 동적 상태 등 컴포넌트가 직접 관리해야 하는 값들이 state로 관리됩니다.
그러나 모든 값이 state로 들어가면 안 되며, 컴포넌트 내에서 변하지 않는 값은 state로 관리하지 않아야 합니다. 예를 들어, props로 전달된 값이나, 컴포넌트 내부에서 계산된 값을 state에 저장할 필요가 없습니다.
또한, state를 사용할 때는 해당 state 값을 직접적으로 변경해서는 안 됩니다. 대신, setState 메서드를 사용하여 state를 업데이트해야 합니다.
React에서 setState() 함수는 비동기적으로 동작합니다. 이것은 setState() 호출이 즉시 상태를 업데이트하지 않고, React 엔진이 성능 최적화 및 일괄 처리를 위해 업데이트를 지연시키기 때문입니다. 이러한 비동기적 특성은 React의 성능을 향상시키고 예상치 못한 동작을 방지하기 위해 존재합니다.
이러한 비동기 동작은 다음과 같이 영향을 미칠 수 있습니다:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
handleButtonClick = () => {
this.setState({ count: this.state.count + 1 });
console.log(this.state.count); // 이 값은 업데이트 이전의 상태를 보여줍니다.
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.handleButtonClick}>증가</button>
</div>
);
}
}
위 코드에서 handleButtonClick 메서드는 버튼 클릭시 count 상태를 1 증가시키려고 합니다. console.log(this.state.count)에서 출력되는 값은 업데이트 이전의 상태입니다. 이는 setState()가 비동기적으로 동작하기 때문입니다.
해결 방법
1. setState() 함수의 두 번째 매개변수로 콜백 함수를 전달하여 상태 업데이트가 완료된 후에 코드를 실행할 수 있습니다.
handleButtonClick = () => {
this.setState({ count: this.state.count + 1 }, () => {
console.log(this.state.count); // 업데이트 이후의 상태를 출력합니다.
});
};
2. 함수형 업데이트 사용:
setState() 함수에 함수를 전달하여 이전 상태를 기반으로 새로운 상태를 계산할 수 있습니다. 이 방법은 이전 상태를 정확하게 기반으로 업데이트할 수 있도록 보장합니다.
handleButtonClick = () => {
this.setState((prevState) => {
return { count: prevState.count + 1 };
}, () => {
console.log(this.state.count); // 업데이트 이후의 상태를 출력합니다.
});
};
둘 다 업데이트 이후의 상태를 보장하므로 비동기적인 특성에 대응할 수 있습니다. 주로 두 번째 방법(함수형 업데이트)이 권장되며, 이전 상태를 정확하게 기반으로 업데이트할 수 있도록 도와줍니다.
'[FRONTEND] > REACT' 카테고리의 다른 글
| [REACT] 기본 문법_Object 자료형 , Route (1) | 2023.10.22 |
|---|---|
| [REACT] 기본 문법_Props ! (1) | 2023.10.20 |
| [REACT] 기본 문법_컴포넌트 문법 & Map( ) 함수 (0) | 2023.10.12 |
| [REACT] 기본문법 (0) | 2023.10.05 |
| [REACT] REACT 시작하기 (0) | 2023.10.03 |