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

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

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

2. 가상 DOM

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

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

Virtual 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 코드:

  Hello, Good Morning!

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

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

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

4. JSX의 Prop

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

JavaScript 표현식을 소품으로 사용:

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

문자열 리터럴:

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

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

예를 들어,

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

5. 클래스 구성요소

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

class Greetings extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

6. 구성 요소 수명 주기

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

마운팅: 구성 요소가 생성되어 DOM에 삽입될 때.

• 건설자()
• 세우다()
• 컴포넌트DidMount()

업데이트 중: 소품이나 상태가 변경될 때.

• 세우다()
• 컴포넌트DidUpdate()

마운트 해제: DOM에서 구성 요소가 제거될 때.

• 컴포넌트WillUnmount()

7. 클래스 속성

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

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

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

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

8. Prop 유형

우리는 컴포넌트의 전달된 속성 유형을 확인하기 위해 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

이렇게 하면 최적화된 프로덕션 빌드가 생성됩니다.

소스 코드 최소화: React 소스 코드 변경에 주의하세요.

코드 분할: 필요에 따라 로드할 수 있도록 JavaScript 코드를 덩어리로 묶습니다.

10. 반응 후크

후크는 함수 구성 요소에서 상태 및 기타 React 기능을 사용할 수 있게 해주는 함수입니다. 가장 인기 있는 두 가지 후크는 다음과 같습니다.

useState: 함수 구성요소에 상태를 추가합니다.

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

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

useEffect: 함수 구성 요소의 부작용을 관리합니다.

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

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

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

React는 최신 웹 개발 요구 사항을 충족하기 위해 지속적으로 발전해 왔으며, 효율적이고 확장 가능한 애플리케이션을 구축하려면 핵심 개념을 숙지하는 것이 중요합니다. React가 라이브러리로서 어떻게 차별화되는지 이해하는 것부터 기능적 구성요소에 대한 후크의 힘을 활용하는 것까지, 이러한 기본 사항은 React를 능숙하게 만드는 길을 열어줄 것입니다.

프로젝트에서 React를 계속 탐색하고 구현하는 동안 최신 사례와 기능에 대한 업데이트를 유지하면 끊임없이 변화하는 기술 환경에서 앞서 나갈 수 있다는 점을 기억하세요. 이 기사가 가치 있다고 생각되면 좋아요를 누르고 React 지식을 심화시키고 싶어하는 동료 개발자들과 공유하는 것을 잊지 마세요!

읽어주셔서 감사합니다. 즐거운 코딩 되세요! ?