리액트로 틱택토 게임 만들면서 기초 배우기 # 4 (props 사용하기)

 

---

 

 

 

이번 글을 통해 배워갈 내용

1. props 를 통한 데이터 전달

 

 

---

 

props의 정의

리액트에서 어떠한 값을 컴포넌트를 통해 전달하고자 할때

props(속성)을 주로 사용합니다.

 

---

먼저 보드 컴포넌트를 열고

 

  renderSquare(i) {
    return <Square value={i} />;
  }

위와 같이 Square 컴포넌트 함수에서 value 값을 넣어줍니다.

 

그렇게 되면 함수 컴포넌트를 호출 할때

0 부터 8까지 값이 들어갈 것입니다.

 

사각형 (Square) 컴포넌트를 열고

{this.props.value}

상위 컴포넌트에서 받은 props 값을 출력해주면

 

 

위와 같이 0 부터 8 까지의 값을 잘 전달 받아 출력해주는 것을 알 수 있습니다.

 

 

 

 

 

 

 

다음 강좌에서는 컴포넌트 상호작용에 대해서 알아보겠습니다.

 

감사합니다.

 

 

 

 

---

구글링하다가 알게된 Props 관련 정의를 읽어보면 좋은 곳

 

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

 

https://react.vlpt.us/basic/05-props.html

5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook

---

 

코드보기

 

https://github.com/songk1992/react_tic_tac_toe_lecture

GitHub - songk1992/react_tic_tac_toe_lecture: 리액트로 틱택토 게임 만들면서 기초 배우기

 

---

 

참조 및 인용 문서

 

https://reactjs.org/tutorial/tutorial.html

Tutorial: Intro to React – React

---

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---