React의 기본 핵심 개념

빠르게 발전하는 웹 개발 세계에서 React는 동적이고 성능이 뛰어난 사용자 인터페이스를 구축하기 위한 초석으로 남아 있습니다. 숙련된 개발자이든 이제 막 시작하는 개발자이든 React의 잠재력을 최대한 활용하려면 React의 핵심 개념을 이해하는 것이 필수적입니다. 이 글에서는 라이브러리 상태부터 후크의 힘까지 React의 기본 원칙을 살펴보고 React 기술을 향상시킬 수 있는 명확한 기반을 제공할 것입니다. 뛰어 들어보세요! ?

1. React는 프레임워크인가요, 라이브러리인가요?

React는 프레임워크가 아닌 JavaScript 라이브러리입니다. 포괄적인 도구 세트를 제공하고 특정 애플리케이션 구축 방식을 시행하는 프레임워크와 달리 React는 UI 렌더링이라는 특정 측면에 중점을 둡니다. 이는 React가 한 가지 일을 잘 수행한다는 Unix 철학을 따르기 때문에 매우 유연하고 인기가 높습니다.

2. 가상 DOM

DOM은 Document Object Model의 약자로 애플리케이션의 UI를 간단히 표현합니다. UI를 변경할 때마다 DOM은 해당 변경 사항을 나타내도록 업데이트됩니다. DOM은 트리 데이터 구조로 표현됩니다. UI를 변경하면 DOM이 해당 하위 요소를 다시 렌더링하고 업데이트합니다. UI를 다시 렌더링하면 애플리케이션 속도가 느려집니다.

이 솔루션에는 Virtual DOM을 사용합니다. 가상 DOM은 DOM의 가상 표현일 뿐입니다. 애플리케이션 상태가 변경되면 실제 DOM 대신 가상 DOM이 업데이트됩니다.

가상 DOM은 트리를 생성할 때마다 요소가 노드로 표현됩니다. 요소 중 하나라도 변경되면 새로운 가상 DOM 트리가 생성됩니다. 그런 다음 새 트리를 이전 트리와 비교하거나 "차이"합니다.

이 이미지에서 빨간색 원은 변경된 노드를 나타냅니다. 이러한 노드는 상태를 변경하는 UI 요소를 나타냅니다. 그런 다음 이전 트리와 현재 변경된 트리를 비교합니다. 업데이트된 트리는 실제 DOM으로 일괄 업데이트됩니다. 이는 React를 고성능 JavaScript 라이브러리로 돋보이게 만듭니다.

요약:

1. 전체 가상 DOM이 업데이트됩니다.
2. 가상 DOM을 업데이트하기 전의 모습과 비교합니다. React는 어떤 객체가 변경되었는지 파악합니다.
3. 변경된 객체와 변경된 객체만 실제 DOM에서 업데이트됩니다.
4. 실제 DOM을 변경하면 화면이 변경됩니다.

3. JSX

JSX(JavaScript XML)를 사용하면 React에서 HTML과 유사한 코드를 작성할 수 있습니다. React.createElement(Component, props, …children) 함수를 사용하여 HTML 태그를 React 요소로 변환합니다.

예:
JSX 코드:

<mytext color="red">
  Hello, Good Morning!
</mytext>

이 예제는 다음으로 컴파일됩니다.

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

참고: 사용자 정의 구성요소는 대문자로 시작해야 합니다. 소문자 태그는 HTML 요소로 처리됩니다.

4. JSX의 Prop

JSX에서는 여러 가지 방법으로 Prop을 지정할 수 있습니다.

Prop로서의 JavaScript 표현식:

<sumcomponent sum="{1"></sumcomponent>

여기서 props.sum은 6으로 평가됩니다.

문자열 리터럴:

<textcomponent text="{‘Good" morning></textcomponent>

<textcomponent text="”Good" morning></textcomponent>

위의 두 예시는 모두 동일합니다.

props의 기본값은 "True"입니다
prop 값을 전달하지 않으면 기본값은 true입니다.

예를 들어

<textcomponent prop></textcomponent>

<textcomponent prop="{true}"></textcomponent>

위의 두 예시는 모두 동일합니다.

5. 클래스 구성요소

React의 구성요소는 클래스 또는 함수로 정의될 수 있습니다. 클래스 구성 요소를 정의하는 방법은 다음과 같습니다.

class Greetings extends React.Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}</h1>;
  }
}

6. 구성요소 수명주기

구성 요소에는 특정 단계에서 코드를 실행하기 위해 재정의할 수 있는 수명 주기 메서드가 있습니다.

마운트: 컴포넌트가 생성되어 DOM에 삽입되는 경우

• 생성자()
• 렌더링()
• 컴포넌트DidMount()

업데이트: props나 상태가 변경될 때

• 렌더링()
• 컴포넌트DidUpdate()

마운트 해제: DOM에서 구성 요소가 제거되는 경우

• 컴포넌트WillUnmount()

7. 클래스 속성

defaultProps를 사용하면 props의 기본값을 정의할 수 있습니다.

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

props.color가 제공되지 않은 경우 기본값은 '회색'입니다.

8. 소품 유형

prop-type을 사용하여 전달된 구성 요소 속성 유형을 확인할 수 있습니다. 일치하지 않으면 오류가 발생합니다.

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

ID 유형 불일치에 대해 경고합니다.

9. 성능 최적화

React는 성능을 위해 설계되었지만 더욱 최적화할 수 있습니다.

프로덕션 빌드 사용:

npm run build

This creates a production build with optimizations.

Minimize Source Code: Be cautious with changes to React's source code.

Code Splitting: Bundle JavaScript code into chunks to load as needed.

10. React Hooks

Hooks are functions that let you use state and other React features in function components. The two most popular hooks are:

useState: Adds state to function components.

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect: Manages side effects in function components.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
}

React has continually evolved to meet the demands of modern web development, and mastering its core concepts is crucial for building efficient, scalable applications. From understanding how React differentiates itself as a library to harnessing the power of hooks for functional components, these fundamentals will set you on the path to React proficiency.

As you continue to explore and implement React in your projects, remember that staying updated with the latest practices and features will keep you ahead in the ever-changing tech landscape. If you found this article valuable, don’t forget to give it a like and share it with fellow developers eager to deepen their React knowledge!

Thank you for reading, and happy coding! ?

위 내용은 React의 기본 핵심 개념의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!