React 소개, 1부

게시 됨: 2020-07-02

우리는 이미 이 블로그에서 WordPress의 새로운 개발 스택과 플랫폼 자체와 이제 새로운 것을 배워야 하는 개발자 모두를 위한 혁명에 대해 이야기했습니다. 예를 들어 얼마 전에 저는 @wordpress/scripts 패키지를 사용하여 Gutenberg를 확장하고 UI에 버튼을 추가하는 방법을 설명하는 게시물을 게시했습니다. 저자로서 나는 내가 잘 아는 것을 공유할 수 있고 함께 배울 수 있다고 느끼기 때문에 튜토리얼을 쓰는 것을 좋아합니다.

불행히도 튜토리얼에는 큰 문제가 숨겨져 있다고 생각합니다. 많은 사람들이 결국 올바른 결과를 얻더라도 무슨 일이 일어나고 있는지 제대로 이해하지 못한 채 맹목적으로 튜토리얼을 따릅니다. 그러나 대부분의 튜토리얼에는 "아하 순간"이 부족합니다. 즉, 모든 것이 머리에서 찰칵하고 왜 그런 일이 일어나는지 이해하는 통찰력과 이해의 순간입니다.

그래서 오늘은 약간의 빛을 발산하기 위해 React에 대한 소개와 함께 일련의 게시물을 시작하려고 합니다. 나는 React를 이해하고 당신이 그것을 빨리 더 잘 할 수 있도록 돕고 싶습니다. 나는 당신이 왜 React가 있는 그대로인지, 왜 그렇게 되어 있는지 이해하기를 바랍니다. React의 원리를 이해했으면 합니다. 더 좋은 코드를 작성하시길 바랍니다.

함수형 프로그래밍

React에 대해 이야기하기 전에 오늘날 우리가 사용하는 많은 프레임워크가 그 원칙에 의존하기 때문에 함수형 프로그래밍 에 대해 몇 분 정도 이야기할 가치가 있다고 생각합니다. 그리고 React(Redux와 함께)도 예외는 아닙니다.

함수형 프로그래밍은 함수를 적용하고 구성하여 프로그램을 만드는 프로그래밍 패러다임입니다. "프로그래밍"은 항상 기능을 구축하고 실행하는 것이라고 생각할 수 있습니다. 그렇죠? 정확히. 나와 함께 참아.

예를 들어 객체 지향 프로그래밍을 고려하십시오. OOP에서 프로그램은 속성이나 필드의 형태로 데이터를 포함할 수 있는 개체와 메서드나 프로시저의 형태로 코드를 만들고 구성하여 빌드됩니다. 보다? 기능이 아니라 객체입니다.

그렇다면 무엇이 함수형 프로그래밍을 특별하게 만드는가? 음, 함수형 프로그래밍을 특징짓는 몇 가지 측면이 있습니다: 순수 함수, 참조 투명도, 불변성, 1차 시민으로서의 함수, 고차 함수 등. 그리고 나는 당신이 스스로 공부하는 것을 추천합니다. 에 대해 향후 게시물에서 이야기할 수 있습니다.) 그러나 이 게시물을 짧게 유지하기 위해 오늘은 한 가지 기능에 중점을 둘 것입니다.

순수 함수

함수형 프로그래밍을 다른 프로그래밍 패러다임과 다른 점 중 하나는 함수를 정의하고 작동하는 방식입니다. FP에서 함수는 순수하므로 다음 두 가지 조건을 충족합니다.

동일한 인수가 주어졌을 때 항상 동일한 결과를 생성합니다.
부작용이 없다

예를 들어 다음은 순수 함수가 아닙니다.

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

여러 가지 부작용이 있기 때문입니다. 즉, 전역 변수를 수정하고(부작용 1) 콘솔에 일부 텍스트를 출력합니다(부작용 2).

또 다른 불순한 함수는 다음과 같습니다.

 function createElement( name ) { const id = Math.random(); return { id, name }; }

보시다시피 항상 동일한 결과를 생성하지는 않기 때문입니다. 특정 이름으로 createElement 를 호출할 때마다 결과가 다릅니다. 결국 id 속성은 Math.random 을 통해 생성됩니다.

순수 함수는 여러 가지 이유로 훌륭합니다. 이해하기 쉽고 놀라움이 없습니다. 그들에게 몇 가지 입력을 제공하면 특정 출력을 반환합니다. 함수를 정의하는 이 방법은 함수가 무엇인지에 대한 수학적 이해에 더 가까워지기 때문에 훌륭합니다. 모든 입력을 잘 정의된 출력에 매핑합니다.

React의 구성 요소

순수 함수와 함수형 프로그래밍은 무엇을 해야 합니까? 글쎄, 우리가 그들의 관계를 도출 할 수 있는지 봅시다 ...

설명서에서 읽을 수 있듯이 React는 "구성 요소"라는 작은 코드 조각을 통해 사용자 인터페이스를 생성하기 위한 JavaScript 라이브러리입니다. 이것은 튜토리얼에서 볼 첫 번째 구성 요소입니다.

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

아주 간단하고 심지어 자명하지 않습니까?

하지만 잠깐만! 이것은 "순수 함수"처럼 보이지 않습니다. 실제로 이것은 객체 지향 프로그래밍을 사용하여 구현된 클래스입니다.

네, 당신이 절대적으로 옳습니다. 이것은 보기에 좋지 않습니다... 우리가 함수형 프로그래밍에 대해 이야기하는 데 시간을 낭비한 것입니까?

이전 구성 요소를 다시 살펴보십시오. 어떻게 생겼나요? 그것은 무엇을합니까? 글쎄, 그것은 쇼핑 목록을 렌더링하기 위해 일부 HTML을 생성하는 단일 메소드( render )가 있는 클래스입니다. 이 쇼핑 목록은 항상 동일하지만(단순한 예입니다.) 하나의 가변 부분이 있습니다. 제목, 여기서 클래스는 내부 속성 this.props.name 을 사용하는 것으로 보입니다.

따라서 React에 대해 아직 아무것도 모르고 코드만 보고 그것이 하는 일을 추론하려고 하면 다음을 볼 수 있습니다.

구성 요소는 "이름"을 받을 수 있습니다. 우리는 그것이 어떻게 이 이름을 갖게 되었는지 정확히 알지 못하지만, 그렇게 한다는 것을 압니다. 결국 this.props.name 은 꽤 좋은 단서입니다.
render 메소드는 Instagram , WhatsApp 및 Oculus 와 같은 "쇼핑 요소"의 (정적) 목록을 렌더링하기 위해 일부 HTML을 생성합니다.
결과 HTML은 100% 정적이 아닙니다. 속성 값에 따라 달라질 수 있는 "이름"을 사용합니다.

내가 어디로 가는지 볼까?

React의 컴포넌트 함수

우리는 순수 함수를 설명했습니다! 값( name )을 취하고 잘 정의된 출력(HTML)을 생성하는 구성 요소가 있습니다. 이것은 우리가 OOP에서 벗어나 이전 구성 요소를 함수로 구현할 수 있음을 의미합니까?

확신하는! 방금 본 지나치게 복잡한 클래스는 props 를 수신하고 HTML을 반환하는 더 간단하고 이해하기 쉬운 순수 함수로 다시 작성할 수 있습니다.

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

이것은 우리가 가진 것과 똑같은 것이지만 훨씬 더 간단합니다. 프로그래머로서 구현할 수 있는 가장 간단한 작업이라고 감히 말할 수 있습니다. React 구성 요소는 일부 소품을 가져와서 HTML을 출력하는 기능에 불과합니다 .

그리고 이것이 바로 여러분이 배워야 할 첫 번째 교훈입니다. React 구성 요소는 순수 함수입니다 . props in, HTML out. 구성 요소는 데이터를 가져오기 위해 비동기 함수를 실행해서는 안 됩니다(부작용이므로). 구성 요소는 수신하는 속성(불변성)을 수정할 수 없습니다.

따라서 한 번 더: 구성 요소는 단순히 일부 소품을 가져와 HTML 출력을 생성합니다. 기간.

하지만 잠깐, 구성 요소가 그렇게 간단하다면 어떻게 유용한 작업을 수행할 수 있습니까? 다음 게시물에서 이에 대해 이야기할 것이기 때문에 계속 지켜봐 주십시오!

Unsplash에서 Josiah Weiss의 추천 이미지.