Epic React: 기본 면학습, 오류 및 개선

간단한 소개
내 인생의 이 순간에 나는 초기 단계에 있는 Javascript fullstack 개발자이다.나는 자바스크립트에 대해 잘 알고 있지만, React는 때때로 나를 골치 아프게 하고, 깊이 이해할 수 없다.저는 클래스를 바탕으로 하는 구성 요소를 배우는 과정에서 자랐기 때문에 나중에 연결을 도입할 때 이런 새로운 창작 방식으로 전환하는 것이 좀 어렵다는 것을 알게 되었습니다.이것이 바로 내가 이 과목을 원하는 이유다.
학습 과정의 일부로서 나는 모든 내용이 아니라 모든 부분의 내용을 기록할 것이다.나의 해결 방안은 비록 효과가 있지만, 왕왕 켄트의 방안보다 더 복잡하고, 그다지 우아하지도 않다.이것은 내가 인코딩 방면에서 개선하기를 희망하는 또 다른 방면이다.
물론 epicreact.dev에서 더 많은 세부 사항과 세미나 자체를 직접 찾을 수 있습니다.
나는 이것이 나 이외의 다른 사람에게 유용하고, 나의 영어 방면의 잘못을 용서하길 바란다.

01: 기본 JavaScript 렌더링
첫 번째 연습에서는 DOM 작업을 위해 일반 Javascript를 사용할 필요가 있습니다.나는 일상적인 업무에서 이런 방법을 사용하기 때문에 첫 번째 부분에서 어떠한 어려움도 겪지 않았다.사실 저는 jQuery에 심각하게 의존하는 코드 라이브러리를 일반 자바스크립트로 바꾸는 데 많은 것을 배웠습니다.
그러나 나는 신체의 근본적인 요소를 처리하는 데 익숙하지 않기 때문에 추가 운동에 대해 생각을 해야 한다.그래서 나는 개인적으로 몰랐다. 그러나 이제는 알았다. 이것은 일리가 있는 것이다. 문서 대상에 바디 대상이 있다는 것이다.나는 여기서 해결 방안을 제시하지 않을 것이다. 그러나 이것은 중요한 일깨움이다. 부모 요소를 자주 검사해야 한다.그들은 안에 무엇을 숨겼는가:)

02:raw React API 소개
세미나의 두 번째 연습은 이미 까다로워졌다. 그것은 나를 매우 기쁘게 했다. 왜냐하면 나는 다시는 같은 것을 배우고 싶지 않기 때문이다.
우리는 결코 자주 React를 사용하지 않는다.createElement.JSX를 사용하면 우리는 이 부분만 건너뛰지만, 이것이 바로 엔진 뚜껑에 있는 작업 방식이다.
그래서 jQuery가 자바스크립트에서의 작용을 이해한 후에 이제는 자바스크립트에서 반응할 수 있게 되었다.
내가 여기서 배운 첫 번째 일은React의 유명한 속성'children'이 일반 JS의 텍스트 내용에 대응하는 것이다.물론 이것은 일리가 있다. 왜냐하면 사실상 우리는 HTML 시각화로 생성된 텍스트를 보여주고 있기 때문이다.
두 번째는createElement에 전달할 수 있는 인자가 세 개 이상 있다는 것이다.

부재 유형(경계,div 등)

원소 내부에서 전달되는 대상(클래스, 하위 클래스 등)

n개의 기타 대상은 추가 하위 대상으로 나타난다.

사실children 속성은createElement의 두 번째 매개 변수에 정의할 필요가 없지만 방법의 끝에 열거할 수 있습니다.

03: JSX 사용
세 번째 연습은 간단한 JSX 요소를 만드는 것입니다. Babel은 React를 사용하여 일반 JS에서 이 요소를 변환합니다.createElement.이것은 기본적으로 이전에 연습한 역방향 공사이기 때문에 결코 어렵지 않다.그러나 흥미로운 것은div 요소에서spread 조작부호를 사용하면createElement가 정확한 위치에 놓는 것이다.

const className = 'myClass';
const children = 'this is my text';
const props = { children, className }
element = <div {...props}/>

자신의 클래스와 하위 클래스인 innertext를 포함하는div를 만들 것입니다.
영상의 또 다른 흥미로운 점은spread 조작부호를 사용하는 위치 우선순위에 관한 것이다.만약 우리가 위에 있는 도구가 있다고 가정하지만, 우리는 다른 이름으로 클래스 이름을 덮어쓰고 싶다면, 우리는 반드시 배열된 도구를 앞에 두어야 한다.작성에서 오른쪽 매개변수는 항상 왼쪽 매개변수보다 우선합니다.

<div {...props, className='secondClass'} /> // <div className="secondClass">
<div {className='secondClass', ...props} /> // <div className="myClass">

04: 사용자 정의 구성 요소 만들기
이제 우리는 마침내 구성 요소를 만들기 시작했다.첫 번째 부분은div를 기본적으로 되돌려주는 함수를 만드는 것입니다. 따라서 우리는 표현 요소에서divdiv를 반복할 필요가 없습니다. 문자열을'children'으로 함수에 전달할 수 있습니다.내가 알고 있지만 분명히 잊어버린 것은 만약 내가 매개 변수를 대상으로 함수에 전달한다면 매개 변수도 반드시 대상이어야 한다는 것이다.그래서:

helloFunction = ({children}) => {
  return <div>{children}</div>
}

helloFunction({ children: 'Hello' });

다음은 이 기능을 하나의 요소로 구현하는 것입니다.
const myElement = React.createElement(message, { children: 'Hello!' })
마지막으로 요소 자체에 결합하면 요소 자체가 ReactDom에 포함됩니다.제공되는 사항:

const element = (
  ...
  {myElement}
)

다음에 같은 helloFunction을 인용하지만, 이를 요소로 바벨을 통해 직접 컴파일합니다.createElement을 통과하지 않아도 됩니다.JSX 덕분에 가능합니다. 함수 이름의 알파벳을 대문자로 하고 원소 대상에서 인용하면 충분합니다.
HelloFunction = () = {}

<HelloFunction>Hello!</HelloFunction>
이것은 React.createElement(HelloFunction, null, 'Hello!')에 해당한다
다음은 propTypes를 실현하여 유형 검사를 할 때입니다. 상기 같은 함수에 두 개의 인자가 있는데 모두 문자열입니다.워크숍에서는 propTypes 기능을 사용하여 수동으로 유형을 검사하는 방법을 소개합니다.하지만 흥미로운 것은 도구 유형 라이브러리를 이용하지 않았다는 점이다.확실히 두 도구에 대한 간단한 검사는 전체 라이브러리에 가져오는 것이 과도하다.나는 영원히 수표 두 장만 쓰지 않을 것이라고 생각한다.<script src="https://unpkg.com/[email protected]/prop-types.js"></script>

HelloFunction.propTypes = {
      greeting: PropTypes.string,
      subject: PropTypes.string,
    }

나도 개성화된 정보를 받지 못했지만, 표준적인 경고는 이해할 수 있다

Invalid prop `subject` of type `number` supplied to `Message`, expected `string`. in HelloFunction

아, 우리 시작합시다. 다음 연습에서 하나의 라이브러리의 실현이...어, 내가 좀 심했어.하지만 좋은 점은 실시가 필요하다는 것이다

HelloFunction.propTypes = {
      greeting: PropTypes.string.isRequired,
      subject: PropTypes.string.isRequired,
    }

어쨌든 타자 규칙!

05: 스타일
이 연습에서는 사용자 정의 구성 요소에 다양한 방식으로 스타일을 적용해야 합니다.첫 번째 부분은 작은 div에 내연 스타일만 추가합니다.그리고 사용자 정의 구성 요소에 전달하고 클래스 이름prop 전달하기;마지막으로 문자열만 사이즈 도구로 전달하고 사용자 정의 구성 요소 내에서 동적으로 스타일을 선택합니다.
첫 번째 주의사항: 재사용 가능한 구성 요소를 만들 때, 보통 모든 기본값을 왼쪽과 사용자가 제공하는 내용 (확장 연산자) 뒤에 두는 것이 좋습니다. 왜냐하면 우리는 일부 내용을 강제로 집행하고 싶지 않기 때문입니다.
두 번째: 여느 때처럼 나는 일을 너무 복잡하게 만들었다.전달된size 속성은 small,medium,large일 수 있고 클래스는box--small,box--medium,box--large라고 불리기 때문에 구성 요소에 전달된size prop으로size를 대체하면 충분합니다.box--${size}아이템이 존재하지 않으면 삼원 연산자에 추가합니다.
대신 클래스 이름을 포함하는 대상을 만드는 중첩된 삼원 연산자가 있습니다.비록 그것이 아직 일하고 있지만, 훨씬 복잡하다😁

const sizes = {
  small: 'box--small',
  medium: 'box--medium',
  large: 'box--large'
}

className={`box ${size === 'small' ? sizes.small : size === 'medium' ? sizes.medium : sizes.large}`}

06: 테이블
첫 번째 연습에서 대상은 제출 탐지기/처리 프로그램을 만들고 있으며, 이 함수는 주 구성 요소의 함수를 호출하고, 이 함수는 도구로 전달됩니다.
우리는 모든 요소에 이벤트를 배치할 수 있다(React 합성 이벤트가 될 것이다).그러나 onSubmit은 포함된 각 필드를 캡처하기 위해 양식 내부로 들어갑니다.
작성 이벤트는 일반 DOM 이벤트와 유사한 모양과 동작을 작성할 수 있는 객체입니다.
여전히 event.nativeEventDOM 이벤트에 접근할 수 있지만 합성 이벤트는 최적화를 거쳐React 코드와 가상 DOM을 사용할 수 있다.
그리고 함수 내부에 함수 (리셋) 를 만들어서submit 단추를 누르면 호출합니다.페이지가 새로 고쳐지지 않도록 preventDefault () 를 이 이벤트에 추가합니다. (폼의 기본 이벤트로)
또 다른 흥미로운 일은 접근성에 관한 것이다.화면 판독기는 입력을 탭과 연결해야 합니다.따라서 id를 입력하고 탭에 htmlFor를 입력해야 합니다. (일반 HTML의 for=파라미터와 같습니다.)이 밖에 입력을 클릭할 때 입력에 관심을 가지는 특성도 제공한다.
연습의 두 번째 부분은 위와 같은 일을 하는 것에 관한 것이지만useRef 갈고리를 사용한다.UseRef는 요소에 대한 참조 포인터일 뿐입니다.
우선, "react dom"이 아닌 "react"에서 가져와야 합니다.
그리고 인용을 우리의 입력에 추가합니다<input ref={usernameInput}>main 함수(또는 맞춤형 구성 요소)에서 hook을 호출할 수 있습니다: const usernameInput = useRef(null);왜 비었어?useRef의 매개 변수는 초기값입니다.그러나 이런 상황에서 우리는 이런 것들을 필요로 하지 않고 사용자 이름 입력의 내용만 필요로 한다.
마지막으로 우리는 다음과 같은 방식으로 모든 인용 속성에 접근할 수 있다. 예를 들어 입력 값: usernameInput.current.value다음 학점에서 제어된 입력을 만들어야 합니다.제어된 입력은 구성 요소 상태가 제어하는 입력 필드입니다.즉, 상태 설정을 통해 값을 입력합니다<input ref={usernameInput} value={username} onChange={handleChange} />.
그리고 구성 요소 상단에 상태를 설정할 수 있습니다: const [username, setUsername] = useState('');마지막으로 이 상태를 사용하여handleChange 함수에 입력한 값을 변경합니다.이 예에서는 각 키를 소문자로 변환합니다.

const { value } = event.target;
setUsername(value.toLowerCase());

따라서 프로세스는 다음과 같습니다.
사용자의 입력 -->입력 상태 업데이트 -->입력 상태 변환 ->상태를 입력 값으로 보내기 -->입력으로 화면에 표시합니다.

07: 렌더 패턴
이 예에서 이러한 연습은 DOM의 요소를 매핑하여 표시할 때 고유한 색인 키를 사용하는 중요성을 보여주기 위한 작은 시범일 뿐이다.없는 것이 아니라 지도 기능을 사용한 미리 만들어진 색인이 아니라 미리 만들어진 키를 사용합니다.또한 React는 연속적으로 렌더링된 경우에도 입력 상태를 유지할 수 있습니다.
이렇게 하지 않는 것은 일종의 잘못으로 예측할 수 없는 어떤 행위도 초래할 수 있다.이번에 나는 이렇게 했는데 한 인터뷰에서 나도 많은 손해를 보았다.

결론
Epic React 베이스 섹션의 전체 내용입니다.나는 다음 세미나가 더욱 도전적일 것이라는 것을 이미 알고 있지만, 일부 기본 지식을 이해하는 것이 유용하다는 것을 일깨워 준다.