[패스트캠퍼스] React 강의 6주차

드디어 국비지원 교육을 통해 들을 수 있는 리액트 강의에 접어들었다.

선생님이 바뀌셔서 그런지 수업 스타일도 약간? 바뀐 것 같았다!

초반에는 클래스를 이용해 컴포넌트를 짰다. 일단.. 리액트를 함수 컴포넌트로만 자주 짜봐서 클래스 컴포넌트로 짜는법이 어색했다.

리액트로 조그마한 어플리케이션 하나를 만들었다.

원래는 완성본을 올리고 싶었지만 아직 진행중이라 완성본은 추후에 넣을 예정이다.

하지만 클래스로 컴포넌트를 짜면서 constructor, super, props의 개념을 다시 잡을 수 있었던 것 같다.

 

일단 이런식으로 클래스로 기본틀을 짜줬다.

constructor안에 super와 state가 바뀔 대상을 지정해준다.

이때 9칸의 네모칸을 만들건데 이 안을 클릭할 때마다 변해야 하는 구조이다.

칸 마다 인덱스 값을 부여한 후 null로 배열 안에 값을 채워준다.

 

배열 복사하기

const squares = this.state.squares.slice();

slice라는 메서드를 통해서 배열을 복사해준다.

그리고 squares내 인덱스마다 "X"값을 부여해주고 setState를 통해서 상태를 변화시켜준다.

 

그리고 스퀘어를 렌더링 해주는 함수에서 Square 컴포넌트 안에 상태값을 받아주고, 클릭했을 때 handleClick이라는 함수가 실행되도록 리턴시켜주면 된다.

마지막으로 render 안에 3 * 3 으로 이루어진 보드를 만들고 그 보드 칸마다 인덱스값을 부여해주면 각각의 칸이 고유의 인덱스 값을 가지게 된다.

 

이건 Square 컴포넌트의 코드이다. 

여기서는 일단 간단하게 버튼 태그로 구성했고, 클릭했을 때 부모컴포넌트에서 props로 onClick이라는 함수를 받아서 실행시켜준다.

그리고 그 해당하는 value값이 버튼 태그 내 텍스트로 들어오게 된다! (이때 "X"가 텍스트로 들어오게 됨)

 

아직도 부모컴포넌트 → 자식 컴포넌트로 props를 내리고 받는 과정이 좀 어려운 것 같다.

특히 constructor 부분과 super를 쓸 때도 있고 안쓸때도..? 있는 것 같아서 더 헷갈리는 것 같다.

이부분은 선생님이 일단은 넘어가라고 하시긴해서 넘어갔다... 대충 쓰이는 방식은 알 것 같은데 좀 어려운 느낌?

확실히 함수 컴포넌트로 짜는게 더 편하긴 한 것 같다!

완성하면 쪼금 이상하지만 이렇게 클릭했을 때 버튼안에 X 표시가 들어간다. 

사이가 벌어지는 부분은 CSS에서 작업해주면 될 부분인 것 같다.

일단은 잘 굴러가는 것을 확인했으니 된 것 같다. 😮

 

다음 강의는 이렇게 클래스를 토대로 짠 컴포넌트를 함수형으로 변환하는 작업을 해줄 차례다.