본문 바로가기

컴포넌트13

[220415] 빙고게임 완성하기 - 02 클릭하면 X -> O 순서대로 찍히게 하기 한번 클릭한 곳은 다시 클릭해도 O/X가 바뀌지 않게 하기 클릭한 곳의 배열과 빙고조건을 충족시키는지 출력 //Square 컴포넌트 위에 작성 const calcuateWinner = (squares) => { const lines = [ [0,1,2], [3,4,5], [6,7,8], [2,4,6], [0,4,8], [0,3,6], [1,4,7], [2,5,8], ] for(let i=0; i 2022. 4. 17.
[220414] 리스트의 단점을 극복하는 상태 끌어올리기 리스트의 단점 리스트에서 props는 부모->자식 간에 데이터를 전달이 가능하게 해주지만, 동일선상에 있는 관계에서는 데이터를 넘겨줄 수 없다. 해결책 : 상태 끌어올리기 부모컨텐츠에 App component에 state를 만들어서 전달해준다. 리액트 사이트에서 설명하는 상태 끌어올리기 : https://ko.reactjs.org/tutorial/tutorial.html#lifting-state-up App에 state값을 저장하기 코드를 실행시키면, Form 컴포넌트에 있는 state가 아닌, App 컴포넌트에 있는 state가 변화된걸 볼 수 있다. class Form extends React.Component{ state ={ value:'', } handleChange = e => { const .. 2022. 4. 17.
[220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component) 한 페이지를 그릴때 , 보여지는 화면에 관련된 모든 컴포넌트를 가져오는 리액트의 습성때문에 기본적인 요청&응답이 길다. 예) 로그인 버튼을 누름 -> 로그인에 관련된 컴포넌트 모두 가져옴. 데이터를 건드리지 않고 화면을 모두 그리고 난 후에는 완료되었다는 신호를 준다. ComponentDidMount라는 신호 (DOMContentLoad와 목적이 같음) 여기부터 비동기통신인 AXIOS를 사용해서 비동기적 통신으로 데이터와 접속함. 리액트는 NODEJS와 webpack의 도움을 받아서 이루어진다. webpack : 100개의 서로다른 js를 1개의 js로 통합시켜주는 번역기 ( = 번들파일) 왜? -> 다른 js 파일을 만들다보면 변수명이 겹치게 되는데 그런 일을 방지해줌. 등장배경 -> require이 .. 2022. 4. 15.

티스토리툴바