모든 React 개발자가 알아야 할 10가지 React 원칙, 개념

React는 쉽지 않습니다. 알아야 할 개념과 원리가 너무 많습니다. 모든 React 개발자가 알아야 할 10가지 React 개념, 용어 및 원칙에 오신 것을 환영합니다.

1. 반응 앱 만들기

이는 React 애플리케이션을 시작하는 가장 인기 있는 방법 중 하나입니다. 이것은 상당한 CLI입니다. 생각보다 고급이지만 기본적으로 새 애플리케이션을 만드는 방법은 다음과 같습니다.

npx create-react-app [name of your app] 

보너스로; typescript를 추가하고 싶다면 정말 간단합니다.

npx create-react-app [name of your app] --template typescript

이전에 말했듯이 더 많은 방법이 있습니다. 그들의 공식 documention을 확인하십시오.
새로운 React 앱을 만들고 나면 HTML 대신 JSX라는 것을 작성하기 시작할 것입니다.

2. JSX

이것은 Javascript 및 XML을 나타냅니다. 기본적으로 HTML에 javascript 및 동적 값을 삽입하는 방법입니다. JSX는 React를 선언적 프레임워크로 만드는 근본적인 것입니다. 이제 JSX가 무엇인지 알았으므로 구성 요소를 만들 준비가 되었습니다.

3. 클래스 기반 구성 요소

이들은 오래된 종류의 구성 요소입니다(React 16.8에 도입됨). 그들은 클래스를 사용하여 구성 요소를 정의합니다.

class Clock extends Component{
// Application Code //
}
export default Clock

클래스 기반 구성 요소의 문제점은 더 이상 사용되지 않으며 초보자가 배우기가 매우 어렵다는 것입니다. 이것은 우리에게 또 다른 유형의 구성 요소를 제공합니다.

4. 기능성 성분

이러한 구성 요소는 간단한 함수로 정의되며 보다 현대적으로 작성됩니다(React 17에서 도입됨).

function clock(){
// application data //
}
export default Clock

이러한 구성 요소는 작성하기가 더 쉽고 깔끔하지만 한 가지 큰 제한이 있습니다. 함수형 구성 요소는 상태 저장 등과 같이 클래스 기반 구성 요소가 수행할 수 있는 대부분의 중요한 작업을 자체적으로 수행할 수 없습니다. 이것은 우리에게 또 다른 개념을 제공합니다.

5. 후크

기능적 구성요소는 데이터 보유 등과 같이 클래스 기반 구성요소가 수행할 수 있는 대부분의 작업을 수행할 수 없기 때문입니다. 후크는 기능적 구성요소의 기능을 확장하는 방법입니다. 가장 중요한 것은 또 다른 개념입니다.

6. useState 후크

이것은 의심할 여지 없이 가장 중요한 React 후크입니다. 사실 기능적 구성요소는 이것이 없으면 쓸모가 없습니다. 그 기능은 기능적 구성 요소에 대한 상태(반응성 데이터)를 생성하는 것입니다.

const [sampleState,setSampleState] = useState('I am a sample state')

usestate 후크 자체는 완전히 완전하지 않습니다. 그래서 다른 후크와 함께 자주 사용됩니다.

7. useEffect 후크

그 후크는 바로 useEffect 후크입니다. 이 후크는 매우 혼란스럽지만 기본적으로 특정 조건에서 코드를 실행하는 데 사용됩니다.

useEffect(() =>{
// some logic
},[condition])

8. 소품

이제 구성 요소가 내부 데이터(useState)를 저장하는 방법을 살펴보았습니다. 구성 요소가 서로 데이터를 공유하는 방법을 살펴보겠습니다. 글쎄, 그들은 소품을 사용하여 그렇게합니다. 어떻게 작동하는지 간단히 살펴보겠습니다.

function body(){
<nav color='red' /> // the color is the prop
}
// now let's receive that data inside the nav component
function nav(props){ // destructing is possible but let's keep it simple
const color = props.color
}

9. 고차 컴포넌트

고차 구성 요소는 구성 요소를 강화하고 재사용하는 데 사용되는 React의 고급 기술입니다. 구성 요소를 인수로 사용하고 다른 것을 반환합니다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

10. 키

데이터 목록을 효과적으로 렌더링하기 위해 목록의 각 항목에 고유 ID를 할당합니다. 그것을 키라고 합니다.

결론

기사를 재미있게 읽으셨기를 바랍니다. 도움이 되셨다면 반응을 남기고 자신만의 고유한 React Concept을 댓글로 남겨주세요.