우리 앱의 샘플 React 플래시카드

App Store 또는 Google Play에서 저희 앱을 다운로드하여 더 많은 무료 플래시카드를 받거나, 모든 플래시카드에 액세스하려면 구독하세요.

JSX란 무엇이며 React에서 왜 사용되나요?

JSX는 JavaScript에 대한 구문 확장으로, JavaScript 코드 내에서 직접 HTML 구조를 작성할 수 있게 해줍니다. 이는 React.js가 구축된 기본 요소 중 하나입니다. 그래서 JSX는 React 생태계에서 매우 중요합니다.

React는 다음과 같은 이유로 JSX를 사용합니다:

1. 코드 청결성: JSX는 코드 개발 프로세스를 단순화하여 개발자가 JavaScript 내에 직접 HTML 구조를 배치할 수 있게 합니다. JSX 없이는 React에서 사용자 인터페이스를 생성하는 것이 훨씬 복잡할 것입니다.

2. 사용의 편리성: JSX는 JavaScript가 HTML과 비슷해 보이게 해줍니다, 따라서 HTML에 이미 익숙한 개발자들에게 특히 사용하기 쉽게 만듭니다.

3. 보안: JSX는 고유한 요소 임베딩을 통해 XSS (Cross-Site Scripting)와 같은 모든 종류의 공격에 대한 코드를 자동으로 보호합니다.

4. 성능: JSX 코드는 성능에 최적화되어 있습니다. 이는 웹 브라우저에서 더 빠르게 해석되는 JavaScript 구문으로 번역됩니다.

기술적으로 JSX는 `React.createElement(component, props, ...children)` 함수에 대한 단순한 구문 설탕일 뿐입니다.

가상 DOM이란 무엇이며 어떤 이점이 있나요?

가상 DOM, 또는 문서 객체 모델(DOM)의 가상 모델은 React와 같은 특정 JavaScript 라이브러리에서 사용하는 개념입니다. 이는 실제 DOM의 가벼운 복사본으로, 메모리에 저장되고 실제 DOM과 독립적으로 업데이트됩니다.

가상 DOM의 주요 장점은 다음과 같습니다:

1. 업데이트가 더 빠릅니다. 가상 DOM은 더 가볍고 실제 DOM보다 더 적은 작업이 처리됩니다. 그 결과 업데이트 작업이 더 빨리 수행됩니다.

2. 실제 DOM에 대한 부하를 줄입니다. 모든 변경 사항은 먼저 가상 DOM에서 처리되고, 이후에 조정(reconciling)이라는 프로세스를 통해 선택된 변경 사항이 실제 DOM에 도입됩니다. 이를 통해 무거운, 자주 찾는 DOM 업데이트를 피할 수 있습니다.

3. 렌더링 과정을 최적화합니다. React는 가상 DOM을 사용하여 실제 DOM에서 업데이트를 수행하는 가장 효율적인 방법을 계산할 수 있습니다. 이는 필요한 작업량을 줄이고 렌더링 성능을 개선합니다.

4. 코딩이 간단해집니다. 개발자들은 마치 각 변화 후에 전체 페이지가 새롭게 렌더링되는 것처럼 코드를 작성할 수 있습니다. React는 프로세스를 최적화하여 가상 DOM과 실제 DOM을 동기화하는데 필요한 최소한의 작업만 수행하도록 관리합니다.

props란 무엇이며 React 컴포넌트에서 어떻게 전달되나요?

Props(원래 "속성"에서 파생)은 리액트 라이브러리의 컴포넌트 속성입니다. 그들은 한 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는데 사용되며, 이 데이터는 컴포넌트가 부모 컴포넌트로부터 받는 데이터이며, 일반적으로 컴포넌트가 호출 될 때 전달됩니다.

Props는 불변이며, 이는 컴포넌트가 받는 props의 값을 수정하지 않아야 하고, 단지 읽어야 함을 의미합니다.

Props는 일 방처럼 (위에서 아래로) 전달됩니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로입니다. 이것은 HTML 요소에 속성을 전달하는 것과 비슷해 보입니다.

Props를 사용하는 방법에 대한 예입니다:

function Welcome(props) {
  return <h1>Welcome, {props.name}</h1>;
}

function App() {
  return <Welcome name = "Christopher"/>;
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

위의 예에서 우리는 `name` prop을 기대하는 `Welcome` 컴포넌트를 생성합니다. 그런 다음 `App` 컴포넌트에서 `Welcome` 컴포넌트의 인스턴스를 생성하고, 이에 "Christopher"라는 값의 `name` prop을 전달합니다. 결과적으로, Welcome 컴포넌트를 사용한 곳에 "Welcome, Christopher"라는 텍스트가 표시됩니다.

useEffect 훅이란 무엇이며 어떤 용도로 사용되나요?

React.js에서 useEffect 훅은 함수형 컴포넌트에서 사이드 이펙트를 수행하는 데 사용됩니다. 사이드 이펙트는 일반적으로 컴포넌트의 렌더링에 직접적인 영향을 미치지 않지만, API에서 데이터를 가져오거나 타이머를 처리하거나 리소스를 정리하는 등 컴포넌트의 정상적인 작동에 필요한 동작입니다.

이것은 클래스 컴포넌트의 컴포넌트 생명주기 메서드인 componentDidMount, componentDidUpdate 및 componentWillUnmount와 유사하게 작동합니다.

세 가지 다른 변형으로 사용할 수 있습니다:

1. 두 번째 매개 변수 없음: 코드는 모든 렌더링 후에 호출됩니다.

useEffect(() => {
  console.log('이것은 모든 렌더링 후에 실행됩니다');
});

2. 두 번째 인수로 빈 배열을 사용: 코드는 첫 렌더링 후에 한 번만 호출되며, 이는 componentDidMount와 유사합니다.

useEffect(() => {
  console.log('이것은 첫 렌더링 후에 한 번만 실행됩니다');
}, []);

3. 두 번째 인수로의 의존성 배열과 함께: 코드는 첫 렌더링 후 그리고 배열의 어떤 의존성의 값이 변경될 때마다 실행됩니다.

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

useEffect(() => {
  console.log('이것은 첫 렌더링 후에 실행되고, "count"가 변경될 때마다 실행됩니다');
}, [count]);

요약하자면, useEffect 훅은 함수형 컴포넌트의 렌더링 후 또는 동안 사이드 이펙트의 실행을 가능하게 하고, 이를 통해 깔끔하고 이해하기 쉬운 코드를 제공하며, 완전한 기능성을 보장합니다.

React 플래시카드

우리 앱의 샘플 React 플래시카드

JSX란 무엇이며 React에서 왜 사용되나요?

가상 DOM이란 무엇이며 어떤 이점이 있나요?

props란 무엇이며 React 컴포넌트에서 어떻게 전달되나요?

useEffect 훅이란 무엇이며 어떤 용도로 사용되나요?

다운로드 IT 플래시카드 지금