2년 정도 업무상 React를 했기 때문에 개인적인 복습용이다.

React가 뭐예요?

React는 UI를 만드는 라이브러리입니다.
사용자 인터페이스는 어셈블리 개념으로 설명됩니다.
기본적으로 사용자는 모든 사용자 인터페이스에 자유롭게 실현되는'사용자 정의 구성 요소'를 만들고 이를 조립하여 웹 응용 프로그램을 구축할 수 있다.React.DOM 객체를 사용하여 HTML을 사용하는 DOM 요소의 어셈블리를 생성할 수도 있습니다.

피쳐 읽기

다음 네 가지는 React의 특징입니다.

재활성화

가상 DOM

구성 요소 기반

JSX

다시 활성화

사용자의 조작과 데이터의 변화를 감시하고 그 변화에 따라 자신이 설정한 처리에 따라 자동으로 화면을 다시 묘사한다.

가상 DOM

jQuery와 일반 JavaScript는 DOM 작업의 최적화 프로세스를 설명해야 합니다.
DOM 작업은 매우 비싼 처리입니다.최근 몇 년 동안, 웹 개발은 대량의 DOM 조작을 필요로 한다.사용자의 조작에 따라 더 많은 데이터를 업데이트하거나 외관을 바꾸기 위해서다.
React는 React 내부의 "가상 DOM"DOM 정보와 실제 DOM을 효과적으로 비교하고 차이를 변경하여 처리를 매우 쉽게 합니다.
이것은 DOM 작업이 필요하지 않고 순수 JavaScript를 최적화하는 과정보다 빠르지 않다는 것을 의미하지 않습니다.
그러나 규모가 큰 응용 프로그램에서 모든 것을 최적화하는 것은 비현실적이다.
결국, 사람을 편안하게 할 수 있는 것을 포착할 수 있다면 좋겠다.

구성 요소 기반

React가 뭐예요?그러나 쓴 바와 같이 React는 구성 요소를 만들어 조립하여 웹 개발을 진행한다.
그럼 그게 가져다 주는 이점은 뭘까요?
이것은'보수성','재사용성','디자인 시스템과의 호환성'을 들 수 있다.

서비스 용이성

구성 요소 단위로 개발하면 디자인을 잘 하면 구성 요소에'단일 책임의 원칙'이 생긴다.
기능, 모양, 상태 등을 이 구성 요소에 제한하고 외부에서 변경할 수 있습니다.
이런 기능의 소재는 뚜렷하게 분리되어 디버깅하기 편리하다.

재사용 가능

보수성으로 쓴 단일 책임 원칙도 재활용성을 높이는 데 도움이 된다.
만약 이 구성 요소가 복잡한 의존 관계를 가지지 않는다면, 여러 위치에서 구성 요소를 다시 사용해서 개발 속도를 높일 수 있다.

설계 시스템과의 호환성

최근 몇 년 동안 디자인 시스템을 응용 프로그램 개발에 도입하는 상황이 갈수록 많아지고 있다.
예를 들어 Atomic Design처럼 전체 웹 응용 프로그램을 구성 요소에 따라 분류하고 관리하며 이를 조합하여 구성 요소를 바탕으로 한다면 간단하게 진행할 수 있다.

JSX

JSX도 React의 특징 중 하나입니다.
JSX는 JavaScript의 확장 구문으로 문서 구조를 JavaScript에 가져올 수 있는 특징을 가지고 있습니다.
쉽게 말하면 JavaScript에서 HTML을 쓸 수 있고 속성과 문자열에 변수와 방법을 삽입할 수 있다.
JSX가 왜 필요한지 신기한 사람도 있을 것 같습니다.
HTML과 JavaScript는 분리 관리되어야 합니다!이런 사상도 광범위하게 고정되었다.
그러나 최근 몇 년 동안의 웹 개발에서 서버용 API에서 데이터를 동적으로 표시하는 경우가 매우 많다.
자바스크립트의 처리를 실제 상황이 거의 없는 HTML 요소와 연결시켜 무의미한 비어 있는 div 와 비어 있는 a 라벨이 흩어져 파일 구조도 아무 것도 없는 상황이다.
이 때문에 WAI-ARIA라는 규격은 논의되었지만, 아까도 서술한 것처럼 최근 몇 년 동안의 웹 개발'동태'는 변화를 나타낸다.내용이 바뀐다는 거야.
그렇다면 JSX에 기술된 WAI-ARIA의 상태를 관리하는 것이 보다 현실적인 의미의 웹을 실현하는 데 도움이 되지 않겠느냐는 의견도 있다.
액세스 권한 WAI-ARIA 1.2 일본어 번역

왜 React와 Vue 같은 JavaScript 라이브러리가 인기가 많을까요?

여기에 쓰여진 React의 특징 중 많은 사람들이 이미 React에 대해 "고기능의 최근 몇 년 동안의 웹 응용 개발에 적합하다"고 느꼈겠지.

비대면 처리 DOM 작업 최적화

구성 요소 관리 용이

JSX 어플리케이션 웹 관리 최적화

이것들은 Vue 등 모든 라이브러리에서 공통적으로 사용되며 미세한 행위와 축소 사상에 따라 구분되어 사용된다.

최소 구성 요소 구성

최소 구성은 사용자 정의 구성 요소 (사용자 정의 구성 요소) 에 필요한 방법으로 읽기 구성 요소 형식 render() 을 되돌려줍니다.
속성을 어셈블리에 추가하면 해당 값에 따라 비헤이비어를 변경할 수 있습니다.
추가된 모든 속성은 this.props 을 통해 접근할 수 있습니다. 예를 들어 부모 구성 요소에서 후대 구성 요소로 정보를 전달할 때 매우 유용합니다.
또한 구성 요소에 속성propTypes을 추가하여 구성 요소가 받아들인 속성의 이름과 값 유형을 설명할 수 있습니다.
반드시 필요한 것은 아니지만 데이터를 검증할 수 있고 구성 요소의 규격으로 작용할 수 있기 때문에 내비게이션성을 높이기 위해 추천된다.
또한 getDefaultProps()라는 이름을 만들고 설정하여 객체에서 선택 가능한 속성의 기본값을 반환할 수 있습니다.
속성은 변경할 수 없는 데이터 (immtable data) 로 간주되며, getDefaultProps() 에 정의된 기본값이나 부모 구성 요소에서 받은 값이 있습니다.

상태 관리

구성 요소는 그릴 때 상태 데이터를 사용합니다.
상태가 변경되면 React는 자동으로 UI를 재구성합니다.즉, 처음에 render() 에서 초기 묘사를 하면 사용자의 조작과 데이터 업데이트 render() 방법에 따라 설정된 디스플레이 방법에 따라 UI가 자동으로 최적화된다.
상태 this.state 에 액세스하려면 객체를 사용하여 어셈블리에서 액세스할 수 있습니다.this.setState()를 사용하여 상태를 변경하고 이 메서드를 호출하면 render() 메서드를 호출하여 UI를 업데이트합니다.
상태는 구성 요소의 특정한 데이터로 데이터가 구성 요소에서 구성 요소로 전달되지 않습니다.
구성 요소가 가지고 있는 개인적인 변수임을 깨달았으면 좋겠어요.

총결산

여기까지 읽어주셔서 감사합니다!
이 기사를 읽고 실제로 만져보고 싶은 사람은 어쨌든 공식 강좌를 시도해 보세요!
가져오는 것부터 작은 게임을 만들 수 있고 시간도 많이 걸리지 않는다.(일본어까지!)
자습서: React 배포
잘못과 인식의 차이가 있다면 지적하세요!