분류 Reactjs

React강좌 - 2 - React 시작하기 (2019 판) II

컨텐츠 정보

  • 조회 357 (작성일 )

본문

구성 요소(Components)에 대해 말하기 


우리는 React 요소를 만들었고 우리 사이트에 그것을 보여주었습니다. 앞으로 우리는 React 구성 요소를 만들 것입니다. 

구성 요소는 <h1>, <div> 등과 같은 요소로 구성된 React 도구입니다.


구성 요소는 사이트 및 앱의 구성 요소입니다. 


구성 요소가 정확히 무엇입니까? 


가장 간단한 용어로, 구성 요소는 다음으로 구성됩니다.

  • 템플릿 (HTML)
  • 상호 작용 (자바 스크립트)
  • 스타일 (CSS)


사이트와 앱을 구성 요소로 구성하여 UI를 별도의 파트로 사용할 수 있습니다. React를 사용하면 JavaScript 함수를 만드는 것처럼 쉽게 구성 요소를 만들 수 있습니다.


웹사이트에서 다음과 같은 것을 구성 요소로 생각할 수 있습니다.

  • site header
  • site footer
  • left sidebar
  • main content
    article title
    article content

많은 구성 요소가 있으므로 구성 요소를 하나로 모아 여러 사이트 페이지 및 조합을 만들 수 있습니다. 

웹 사이트와 앱은 구성 요소의 조합입니다. 페이스 북, 구글 또는 트위터에 모양을 제공하고 해당 사이트의 구성 요소를 지적 할 수 있는지 확인하십시오.


앞으로 나아가서 React 구성 요소를 만들어 봅시다.


첫 번째 React 구성 요소 만들기 


이제 마지막 예제가 어떻게 유용한 지 궁금해 할 것입니다. 여기에 변수가 있고 React를 사용하여 표시했습니다.


HTML로 왜 그렇게 할 수 없습니까? 


이것은 간단한 예이지만 오늘날의 웹 사이트와 애플리케이션의 진실은 데이터 자체가 앱 자체가 아니라 다양한 출처에서 온다는 것입니다. 데이터를 가져올 수 있습니다.

  • 자신의 데이터베이스
  • 나만의 API
  • Facebook / Google / Twitter API와 같은 타사 API
  • localStorage와 같은 브라우저 저장소에 저장된 데이터

React와 같은 UI 라이브러리가 없으면 여러 소스에서 데이터를 관리하는 것이 어려울 수 있습니다. React의 또 다른 큰 이점은 우리가 이러한 소스로부터 얻은 데이터를 얻은 후에 우리는 추가 코드없이 UI를 자동으로 업데이트 할 수 있다는 것입니다. 우리는 이것이 곧 무엇을 의미하는지 정확히 알게 될 것입니다.


데이터가 변경 될 때마다 UI를 자동으로 업데이트합니다. 동적 사이트 구축은 좋은 UI / UX입니다. 


일반 HTML 형식으로 UI를 업데이트하려면 페이지를 새로 고쳐야 합니다. 이는 사용자에게 나쁜 사용자 경험을 안겨줍니다. 페이스 북이나 트위터가 새로운 데이터가 들어올 때마다 업데이트 해야 한다고 상상해 보십시오!


React Component 만들기 


앞서 작성한 메시지 변수를 제거하고 JavaScript 클래스를 사용하여 React 구성 요소를 작성해 보겠습니다. 여기에 우리의 구성 요소가 있습니다.


function App() {
  // my component goes here
}

이 구문은 익숙 할 것입니다. 이것은 단순한 오래된 JavaScript 함수이기 때문입니다!


React 구성 요소를 만드는 것은 JavaScript 함수를 만드는 것만 큼 간단합니다. 


참고 : React 스타일 규칙에서는 구성 요소가 PascalCase이어야 한다고 설명합니다. 사이트 헤더를 호출 할 구성 요소가 있는 경우 구성 요소의 이름은 SiteHeader입니다.


우리는 첫 번째 React 구성 요소를 만들었지만 아직 아무 것도 하지 않습니다. 앞서 언급 한 것처럼 우리는 자바 스크립트와 템플릿을 조합하여 구성 요소를 만들 예정입니다. React에서 템플릿은 JSX를 사용하여 작성됩니다.


다음 기사에서 JSX에 대해 자세히 다룰 것입니다. JSX는 JavaScript의 구문 확장이지만 이 자습서에서는 JSX를 "JavaScript 내부의 HTML"이라고 생각합니다.


JSX에 대한 참고 사항 


JSX는 React가 사용하는 템플릿 언어이며 React를 배우려는 많은 사람들에게 학습 곡선이 될 수 있습니다.


JSX는 그다지 무서운 것이 아닙니다. 사람들은 HTML에서 오는 구문을 보는데 익숙하지 않습니다.


나는 JSX를 쓰면 더 나은 JavaScript 개발자가 될 것이라고 확고히 믿는다. 


우리는 이 기사에서 JSX와 너무 깊이 관련하지 않을 것입니다. JSX는 자체 기사를 제출할 자격이 있습니다. JSX에 조심하는 경우 내 추천은 기회를 제공하는 것입니다. 우리가 몇 가지 사항을 세울 때까지 어떤 판단이라도 쥐고 있으면, 생각했던 것만 큼 무서운 것은 아닙니다.


구성 요소에 템플릿 추가 


우리 구성 요소로 돌아가 템플릿을 추가합시다.


자바 스크립트를 특정 템플릿에 묶는 것은 특히 대규모 코드베이스에서 코드를 훨씬 더 읽기 쉽고 관리하기 쉬워 지므로 구성 요소가 개념적으로 훌륭합니다. 


이 함수는 구성 요소이므로 JavaScript는 어디에 두어야 하며 템플릿은 어디에 두어야 합니까? 

React 함수 컴포넌트에서 우리는 함수에서 템플릿을 반환 할 것입니다 :


function App() {
  // javascript stuff goes here

  return (
    // template goes here
  );
}

템플릿의 위치를 ​​알았으므로 이제 <h1>을 추가하십시오.


function App() {
  // javascript stuff goes here

  return (
    <h1>im in a fancy component now!</h1>
  );
}

이제 이 구성 요소가 있으므로 React에 이를 사용하도록 알릴 필요가 있습니다.


우리의 새로운 구성 요소를 부릅니다. 


React에서는 구성 요소를 만들 때 React에서 HTML 태그 인 것처럼 사용할 수 있습니다.


예를 들어,이 앱을 만들었으므로 React as <App />에서 사용할 수 있습니다. 슬래시가 있음을 알 수 있습니다. React 구성 요소를 사용할 때 어떤 종류의 종료 태그를 사용해야 합니다.


<App />

// or 
<App></App>

우리 ReactDOM.render()에 돌아와서 사용합니다.


function App() {
  // javascript stuff goes here

  return (
    <h1>im in a fancy component now!</h1>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

https://codepen.io/chrisoncode/pen/JwQxdy 


jv0tfh9ldudbxdcldxlz.png 


구성 요소를 다시 사용할 수 있습니까? 


구성 요소 기반 디자인의 이점 중 하나는 코드 DRY (dont-repeat-yourself)를 유지할 수 있다는 것입니다. 이 <App /> 구성 요소를 여러 번 다시 사용할 수도 있습니다.


ReactDOM.render(
  <div>
    <App />
    <App />
    <App />
  </div>,
  document.getElementById('root')
);

참고 : React는 템플릿을 정의 할 때 항상 부모 요소를 1개만 원합니다. 이것이 우리가 모든 것을 하나의 <div>로 감싼 이유입니다.


uzwutlxhlokgcjvkokhx.png 


https://codepen.io/chrisoncode/pen/YdmzRy 


구성 요소는 웹 사이트 및 앱을 구축하는 데 사용할 수 있는 매우 강력한 도구입니다. 웹 컴포넌트, React, Vue, Angular 및 많은 다른 프레임 워크를 볼 때 컴포넌트 아키텍처는 웹 개발에서 볼 수 있는 요즘 어디에나 있습니다. 컴포넌트는 애플리케이션을 분리하는 논리적인 방법입니다.


이 앱에서 데이터로 작업을 진행하십시오.


데이터 재생 


앞의 예제에서 우리는 컴포넌트를 사용하기 전에 message라는 변수를 생성했습니다. 구성 요소에서 데이터를 만들 때 몇 가지 옵션이 있습니다.

  1. 변수 생성 (이전과 동일)
  2. 상태(state) 변수 만들기

데이터를 업데이트하고 템플릿 이 자동으로 변경 사항을 표시하게 하려면 상태라는 개념을 사용합니다. 


간단한 변수 만들기 


이것이 이전 예제를 다시 만드는 방법입니다. 이 접근 방식의 단점은 메시지를 업데이트 할 때마다 템플릿이 업데이트 되어 변경 사항을 표시하지 않는다는 것입니다.


function App() {
  const message = 'javascript is so cool';

  return (
    <h1>{message}</h1>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

https://codepen.io/chrisoncode/pen/xMMrgz 


이와 같은 간단한 변수를 사용할 때의 문제점은 React가 변경 될 때마다 다시 렌더링 하지 않는다는 것입니다. React가 새로운 데이터로 템플릿을 업데이트 할 것이라는 것을 100 % 확신하기 위해, 우리는 React state라는 개념을 사용할 것입니다.


React State를 사용하여 변수 표시 


변수 업데이트가 템플릿에 자동 반영되도록 하려면 React 상태를 사용하고 싶습니다. 이 예제를 변경하여 React 상태를 사용하도록 합시다. 그런 다음 메시지 변수가 변경 될 때마다 React가 템플릿에 새 데이터를 다시 렌더링 합니다.


여기서 전체 구문을 작성해보고 무슨 일이 일어나는지 이야기하겠습니다. 익숙하지 않은 JavaScript 구문이 배열 소멸(array destructuring)이라고 불리는 것을 볼 수 있습니다.


function App() {
  const [message, setMessage] = React.useState('javascript is so cool');

  return (
    <h1>{message}</h1>
  );
}

useState가있는 행을 확인하십시오.


const [message, setMessage] = React.useState('javascript is so cool');

이를 배열 소멸(array destructuring)이라고 합니다.


React.useState는 우리에게 두 부분을 준다.

  • 우리가 message라고 부르는 변수
  • 우리가 setMessage를 호출 한 변수를 설정하는 함수

변수와 함수의 이름을 원하는 대로 지정할 수 있습니다. 우리는 messagesetMessage를 호출합니다. 왜냐하면 그것이 변수를 호출하기를 원하기 때문입니다.


우리는 React prerequisites에 대한 다가 오는 게시물에서 구조 조정에 대해 더 이야기 할 것입니다.


useState() 내부에서 message 변수의 기본값을 설정할 수 있습니다.


본질적으로 우리는 다음 세 가지를 수행했습니다.

  1. message 변수 만들기
  2. message 변수 (setMessage)를 업데이트하는 방법을 만들었습니다.
  3. message의 기본값 설정

우리가 메시지를 업데이트하기 위해 setMessage를 사용할 때마다 React가 뷰를 업데이트 할 것입니다. 


setMessage 함수가 제대로 작동하는지 확인합시다.