React 구성 요소 소개
React 컴포넌트는 React 애플리케이션의 기본 구성 요소입니다. UI 요소와 해당 논리를 캡슐화하여 코드를 더 쉽게 관리하고 재사용할 수 있습니다. 이 블로그 게시물에서는 Hooks가 웹 사이트 구축을 위한 많은 클래스 수명 주기 방법을 어떻게 대체했는지를 포함하여 구성 요소, JSX, 기능 구성 요소와 클래스 구성 요소 간의 차이점에 대해 더 자세히 알아볼 것입니다.
ReactJs 및 NextJs 프로젝트 설정도 확인하세요.
React 컴포넌트란 무엇인가요?
React 구성 요소는 UI의 특정 부분을 나타내는 재사용 가능한 코드 조각입니다. 기능적 구성 요소일 수도 있고 클래스 기반 구성 요소일 수도 있습니다. 기능적 구성 요소와 클래스 구성 요소 간의 몇 가지 차이점을 확인해 보겠습니다.
참고: 구성 요소 이름이 항상 대문자로 시작하는지 확인하고 다른 메소드/변수는 소문자로 시작해야 구성 요소와 다른 코드를 구별할 수 있습니다. 또한 가독성을 위해 코드 구조를 유지합니다.
기능성 구성 요소
- 이는 더 간단하며 프리젠테이션 구성 요소에 선호되는 경우가 많습니다.
- JSX 요소를 반환하는 공통 함수로 정의하면 구성 요소를 더 쉽게 작성할 수 있습니다.
- 많은 작업 없이 Hook을 사용하여 상태 및 수명주기 메서드(클래스 기반 수명주기 메서드)를 가질 수 있습니다. 후크는 다음과 같습니다 사용효과, 사용상태 일반적으로 사용되는 것입니다.
- 후크를 사용하면 변수를 쉽게 정의하고 관리할 수 있을 뿐만 아니라 더 적은 코드로 API를 사용할 수 있습니다.
- 더 간단한 구성 요소도 하나의 라이너로 정의할 수 있습니다.
기능적 구성 요소의 예:
function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
</div>
);
}
여기서 props는 여러 값을 전달하는 객체로 사용되며, name은 객체에서 사용자에게 인사하는 하나의 필드입니다. 예를 들어 이름이 다음과 같은 경우 남자“Hello, JOHN!”이 표시됩니다. 출력 화면에
람다 표현식이 포함된 한 줄 구성 요소의 예입니다. 이는 작은 코드가 있는 경우에만 유용하며 권장되지 않으므로 여러 논리를 포함해서는 안 됩니다.
const Greeting = (props) => <div><h1>Hello, {props.name}!</h1></div>;
다음과 같은 코드 구문에 대한 올바른 방법도 읽어보세요. 카멜 케이스 그리고 파스칼케이스 알고
클래스 구성요소
- 더 복잡하며 다음과 같은 상태 및 수명주기 방법을 가질 수 있습니다. 컴포넌트DidMount, 컴포넌트WillMount등등.
- 이들은 확장 클래스로 정의됩니다.
React.Component and may contain constructor as well with class methods known as lifecycle methods to intitalise and use variables and consume api. - 상태 관리 또는 사용자 정의 수명 주기 동작이 필요한 보다 복잡한 구성 요소에 사용됩니다.
클래스 구성요소의 예:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
React 구성 요소에서 JSX 사용
JSX는 JavaScript 코드 내에서 HTML과 유사한 구조를 작성할 수 있게 해주는 JavaScript용 구문 확장입니다. 빌드 시 일반 JavaScript로 컴파일됩니다. 최신 React 버전의 기능적 클래스 기반 구성 요소 모두에서 사용할 수 있습니다.
JSX의 예:
const element = <h1>Hello, world!</h1>;
const RenderElement = () => <div>{element}</div>
그만큼 요소 는 HTML 조각일 뿐인데, 여기서 렌더 요소 HTML 코드와 조각을 래핑하는 구성 요소입니다. 프래그먼트를 사용하여 복잡한 로직을 별도로 유지할 수 있습니다.
여러분이 알아차릴 수 있는 또 다른 차이점은 Fragment는 HTML 코드의 일반적인 값 할당인 반면, Component는 렌더링된 UI를 반환하는 함수입니다.
React 구성요소 렌더링
React 구성 요소를 렌더링하려면 간단히 render 상위 구성 요소의 메서드 또는 JSX에서 직접.
구성 요소 렌더링의 예:
function ParentComponent() {
return (
<div>
<Greeting name="Alice" />
</div>
);
}
// This is how we use in another components
<ParentComponent />
React 구성 요소의 소품
Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용됩니다. 변경이 불가능하며(시간이 지나도 변경되지 않음) 하위 구성 요소 내에서 직접 수정할 수 없습니다. 다른 상태 값을 변경하는지 여부에 관계없이 동일하게 유지됩니다. Props는 문자열, 숫자 또는 객체로 전달될 수 있습니다.
소품 전달의 예:
<Greeting name="Bob" />
<Greeting user = {{"name": "Bob", "age":18}} />
첫 번째 소품은 단순한 문자열이고 다른 소품은 객체입니다.
React 구성 요소의 상태
상태(State)는 React 컴포넌트 내에서 데이터를 관리하기 위한 메커니즘입니다. 이를 통해 구성 요소는 자체 데이터를 저장하고 업데이트할 수 있습니다. 시간이 지남에 따라 변경되어야 하는 값을 상태 변수에 전달할 수 있으며, 사용자는 현재 상태 값을 확인하여 변경된 값을 추적할 수 있습니다.
Hooks와 함께 상태를 사용하는 예:
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
수명주기 방법과 후크
클래스 구성요소 다음과 같은 수명주기 방법을 사용하십시오. componentDidMount, componentDidUpdate그리고 componentWillUnmount 부작용을 수행하거나 상태를 관리합니다. 시간이 지남에 따라 값을 확인하고 업데이트하려면 여러 가지 방법을 사용해야 합니다. 또한 UI를 업데이트해야 하는지, API에서 데이터를 가져와야 하는지에 따라 결정됩니다. 이는 다소 복잡했으며 제대로 구성하지 않으면 애플리케이션에서 메모리 누수가 발생했습니다.
기능적 구성 요소 다음과 같은 후크를 사용하세요 useEffect 내부적으로 수명주기를 포함하지만 적절한 구현을 통해 유사한 기능을 달성합니다. 후크는 기능적 구성 요소의 부작용과 상태를 관리하는 보다 선언적이고 더 쉬운 추론 방법을 제공합니다. 후크는 수명주기보다 간단하고 코드가 줄어들어 후크를 더 쉽게 사용할 수 있으며 수명주기 방법보다 모든 사람이 좋아합니다.
예를 들어, 사용효과 후크 결합 컴포넌트DidMount, 컴포넌트DidUpdate 그리고 컴포넌트WillUpdate 기능을 더 쉽게 만들고 실제 변경 사항이 있는 경우에만 구성 요소를 업데이트하는 수명 주기 방법입니다. 그렇지 않으면 다음 로직으로 이동합니다. 이렇게 하면 상태 업데이트를 계속 확인하고 메모리 누수를 방지하는 데 도움이 됩니다.
사용 예 useEffect:
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
};
fetchData();
}, []);
// This will only execute once as its an empty dependency array
// ...
}
React Docs에서 수명주기 방법 확인
React Docs에서 Hooks 사용법을 확인하세요
기능적 구성요소와 클래스 구성요소 중에서 선택
- 기능적 구성 요소 일반적으로 Hooks의 단순성과 이점으로 인해 대부분의 사용 사례에서 선호됩니다. 또한 최신이며 React 16부터 기본이며 깔끔한 코드와 새로운 기능과의 호환성을 위해 권장됩니다.
- 클래스 구성요소 사용자 정의 수명 주기 방법이나 참조 전달이 필요한 복잡한 구성 요소에는 계속 사용할 수 있습니다.
기능적 구성 요소와 클래스 구성 요소 간의 차이점과 Hooks가 어떻게 많은 클래스 수명 주기 메서드를 대체했는지 이해함으로써 React 애플리케이션에서 사용할 구성 요소 유형에 대해 정보에 입각한 결정을 내릴 수 있습니다. 다음 기사에서 더 자세히 알아봅시다. 연결을 유지하고 블로그를 읽어주셔서 감사합니다.
