솔로 위크 + 리액트 (pt. 1)

어제의 글이었어야 합니다. 어젯밤에는 코드를 작성하거나 작업하는 대신 친구들과 외식을 했습니다. 훌륭한 결정입니다.

오늘은 토요일이고 이 프로그램이 시작된 후 첫 수업 없는 토요일이었지만 나는 많은 일을 했습니다. 기분이 좋았다.

우리는 지난 주에 Front-End Capstone(FEC) 프로젝트를 계획하는 데 보냈습니다. 나는 계획하는 것을 좋아하지 않으며, 현재 팀원들과도 잘 지낼 수 있지만 우리의 프로세스가 어떻게 진행되었는지에 대해서는 그다지 좋아하지 않습니다. 괜찮습니다. 학습 프로젝트입니다. 하지만 코드 작성을 하루라도 더 일찍 시작했으면 합니다. 관리하기 쉬웠을 것이고 제 생각에는 더 생산적이었습니다.

React로 작업하기

이것은 프론트 엔드 프로젝트이기 때문에 거의 전적으로 React로 작업했습니다. 잘 진행되고 있습니다. 제 말은, 그 일이 점점 만들어지고 있지만, 더 나아가 저는 몇 가지 새로운 것을 배웠고 이전에 흔들리던 몇 가지 사항에 대해 더 확고해졌습니다. 물론 오늘의 작업도 몇 가지 질문을 제기했습니다. 그 질문들부터 시작하겠습니다.

질문

조건부 렌더링에 도움이 되는 작은 도우미 변수를 작성하거나 더 간결하게 작성할 때 왜 그것들이 클래스 구성 요소 정의가 아닌 렌더 함수에서 선언됩니까?

나는 초기 React 시절에 나를 어리둥절하게 했던 무언가를 이해하기 시작했습니다. 따라서 React는 상태 변경 시 구성 요소(또는 그 일부)를 다시 렌더링한다고 생각합니다. 이것이 상태 변수를 변경하기 위해 일반 객체 액세스(점 또는 대괄호)가 아닌 setState(함수)를 사용하는 이유입니다. 나는 setState가 다시 렌더링을 트리거한다고 상상합니다.

ComponentDidMount를 사용하여 데이터를 가져오고 상태 변수를 채우고 있습니다. 다음과 같이 보입니다.

this.setState({styles: data.results})
this.setState({selectedStyle: data.results[0]})
this.setState({stylePhotos: data.results[0].photos})

이것에 대해 뭔가 잘못된 것 같습니다. 동일한 상위 개체를 참조하는 별도의 상태 변수가 있어야 합니까? 내가 이것으로 해결하고 있는 문제는 구성 요소가 stylePhotos(사진 위에 매핑됨)를 렌더링하므로 styles.selectedStyle.photos와 같은 것으로 초기 페이지 로드 시 해당 사진에 액세스하려고 하면 선택한 스타일 때문에 페이지가 중단된다는 것입니다(자세한 내용은 나중에). 페이지 로드 시 빈 개체이고(그 문제에 대한 스타일도 마찬가지임) 정의되지 않은 개체의 값에 액세스하려고 하면 오류가 발생합니다.

이 문제를 해결하기 위해 다음과 같이 상태를 초기화했는데 오류가 발생하지 않습니다.

    this.state = {
      styles: [],
      focusedImageIndex: 0,
      carouselIndex: 0,
      selectedStyle: {},
      stylePhotos: []
    };

예, 질문은 다음과 같습니다. 이 작업을 수행하는 더 좋은 방법이 있습니까?

덜 구체적인 질문

우리는 팀으로 이 프로젝트에서 Context(Redux와 같은 상태 관리 라이브러리라고 생각함)를 사용하기로 결정했습니다. 아마도 컨텍스트는 위의 내 질문에 대한 답변이 될 것입니다. 그러나 나는 Context로 바로 시작하지 않음으로써 나 자신을 위해 얼마나 많은 리팩토링 작업을 만들고 있는지 궁금합니다.

나는 의도적으로 React 지식을 확장하지 않습니다. 대신 문제가 발생하면 문제를 해결할 수 있다고 가정하고 제한된 방식으로 사용하고 있습니다. 끔찍한 접근입니까? 더 깊이 들어가서 나중에 도움이 될 수 있는 도구를 찾아야 합니까? 이러한 도구를 기억하고 해당 접근 방식에 적용할 기회를 인식할 수 있습니까? 저는 실습 학습자이므로 문서를 검토하면서 테스트/학습 코드를 작성해야 합니다. 그리고 그 과정이 내가 현재 프로젝트에 적용해야 하는 시간을 잡아먹나요?

계속

자, 이 포스트는 혼자서 설 수 있을 만큼 충분히 길고, 컴퓨터를 내려놓을 만큼 늦어지고 있습니다. 이에 대해서는 2부에서 다시 다루겠습니다.