100DaysOfCode 중 3위

셋째 날, 그것은 꽤 마음이 뭉클했습니다. 나는 React를 사용하여 다른 프로젝트를 만들었고, 이 프로젝트에 대해 기분이 좋습니다. 😀

구문은 상당히 압도적이지만 여전히 MongoDB의 콜백 지옥 및 스키마만큼 나쁘지 않으므로 괜찮습니다.

어쨌든 오늘은 다음과 같은 것들을 배웠습니다.

TC39는 ECMAScript를 매년 릴리스하는 기술 커뮤니티입니다. - 더 많이 알고 계셨나요❓ 정말

ES6의 클래스.

API, promise, async 및 await를 가져옵니다.
앱이 작동하도록 하는 데 충분합니다. 그렇지 않으면 작동 방식을 모르겠습니다

.

React의 Class Component - 이것은 오늘날의 영웅입니다.

생성자의 기능 및 클래스 구성 요소의 this

React.Component 클래스는 무엇입니까

super() 생성자

render() - 클래스 구성 요소에는 render() 함수가 있어야 합니다.

props가 아닌 클래스 구성 요소의 'props' 키워드(복수형)

반응형 스타일링

그 가치.

그리고 style 속성에 스타일을 전달하는 이중 중괄호 구문이 없다는 사실에서 우리는 javascript 객체를 전달하고 외부 중괄호는 동적 표현식 구문임을 나타냅니다.

클래스 구성 요소의 '상태' 내부 속성은 객체여야 하며 다른 데이터 유형일 수 없습니다.

클래스 필드 - 예를 들어

constructor(props){
  super(props);
  this.state = {
    profiles: [], // just some variable name
  }
}

그런 것은 이와 같은 것으로 대체 될 수 있습니다 (lol slick code 😂)

state = {
  profiles: [],
}

반응에 입력

일반 DOM API(즉, querySelector())를 통해

ref()를 통한

- 반응 구문

제어 요소를 통한

- 흥미로운 요소

오늘 내가 직면한 문제는 completed file 누구든지 확인하고 싶은 경우의 67행에 있습니다.

이들 대신에,

addNewProfile = (profileData) => {
this.setState(
  prevState => ({
    profiles: [...prevState.profiles, profileData],
  })
)
};

setState()를 사용하지 않고 배열에 직접 값을 푸시하려고 했습니다.

addNewProfile = (profileData) => {
  this.state.profiles.push(profileData) 
// it didn't gave an error but the DOM also never updated itself. 
};

예, 이것으로 요약됩니다.
가장 힘들었던 부분은 입력 부분인데 사실 굉장히 간단했어요. 지금 제가 부족한 것은 연습뿐이고 프로젝트를 몇 개 더 만들고 나면 마스터할 수 있을 거라고 확신합니다.

👉 이건 나의 오늘 work

👉 여기에 파일을 빌드하고 실행할 수 있습니다 playground

이 글을 읽고 함께해주셔서 감사합니다 😀
행운을 빌어요.🤗
아름다운 하루 되세요. 🌻