React: 더 나은 코딩 방법

플랫아이언 스쿨

 

반응형

오랫동안 웹 애플리케이션을 코딩하는 방법은 손으로 모든 DOM 요소를 만드는 방법밖에 없었습니다. 저는 최근에 리액트라는 프레임워크를 사용하는 좀 더 선언적인 프로그래밍 방법을 알게 되었습니다. 또한 React는 코드를 디버그하는 것을 더 쉽게 만들 뿐만 아니라 코드를 더 짧고 읽기 쉬우며 코드에 대한 고통을 줄여줍니다!

리액트에는 몇 가지 놀라운 기능이 있지만, 그 부분을 다루기에 앞서 리액트로 코딩하는 것은 당신의 바닐라 자바스크립트로 코딩하는 것과는 매우 다를 것이라고 말해야 합니다. 리액트는 자바스크립트의 확장판인 JSX를 사용하기 때문이다.

특징들

이미 작업한 React의 두 가지 주요 기능은 다음과 같습니다.

 

• 선언적
• 구성요소 기반

선언적

명령형 프로그래밍과 선언형 프로그래밍이라는 표현에 대해 들어본 적이 있다면, 여러분은 이미 어떤 것이 반응인지 알고 있을 것이다. 그렇지 않은 경우:

명령:

• 프로그램이 수행해야 하는 모든 조치와 단계를 명시적으로 설명합니다.
• 프로그램이 이러한 작업을 수행하는 방법을 설명합니다.

 

선언적:

• 프로그램이 달성해야 할 목표(최종 결과)를 설명합니다.
• 최종 결과에 도달하는 방법은 프로그램에 맡깁니다.

아직 이것으로부터 결정하지 않았다면, 리액트는 실제로 선언적 프로그래밍의 한 형태이다.

다음은 리액트(명령적 연산) 없이 DOM 요소를 만드는 방법입니다.

const header = document.createElement("h1");
header.textContent = "Hi!";
header.className = "main";

const container = document.querySelector("#container");
container.append(header);

 

하지만 리액트:

// JSX syntax
const header = <h1 className="main">Hello from React!</h1>;

ReactDOM.render(header, document.querySelector("#container"));

리액트에서는 헤더를 만드는 방법이나 변경 사항에 대해 명확하게 말할 필요가 없었습니다! 그리고, 이것을 하기 위해 단지 두 줄의 암호만 필요했어요!

그나저나 이 코드 블록들을 플랫아이언 스쿨에 공을 돌리세요!

구성요소 기반

 

리액트에서는 JS 파일 하나에 모든 코드를 입력할 필요가 없습니다. 대신, 그것은 우리가 그것을 "구성 요소"로 나누도록 장려합니다. 이러한 각 구성 요소는 고유한 JS 파일에 배치될 수 있습니다. 이를 통해 각 구성 요소를 디버그하기 쉽고 파일의 줄 수를 줄일 수 있으며 보다 체계적으로 구성할 수 있습니다.

여기에서는 리액트로 만든 웹 애플리케이션의 상위 구성 요소의 예를 보여드리겠습니다. 여기에 나와 있는 용어 중 일부는 아직 다루지 않았지만 React 웹 사이트에서 React와 관련 용어 및 구조에 대한 튜토리얼을 볼 수 있습니다.

//App.js
import NavBar from "./NavBar";
import Map from "./Map";
import ResultList from "./ResultList";
function App(){
     return(
             <div>
                <NavBar />
                <ResultList>
                   <ResultItem result={result1} />
         </ResultList>
         <Map />
             </div>
   );
}

결론

내 생각에 웹 애플리케이션을 코딩하는 데는 리액트가 더 나은 방법이에요. 자바스크립트만으로 코딩하는 것에 비해 리액트는 더 체계적이고 코딩(디버그)하기 쉬우며 읽기 쉽다.