본문 바로가기

리액트47

[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] 빙고게임 완성하기 - 01 1-9까지 채워진 숫자판 만들기 클릭하면 X가 표시되는 숫자판 변형본 (Square, Board 컴포넌트만) class Square extends React.Component{ render(){ //{this.props.value} 부모에게서부터 던져준 데이터를 보여주겠다!!!! return( { this.props.onClick() } } > {this.props.value} ) } } class Board extends React.Component{ state = { // square:[null,null,null,null,null,null,null,null,null] squares : Array(9).fill(null) } handleClick = (i) => { const squares = [..... 2022. 4. 17.
[220414] 리스트로 DB 데이터를 다루는 방법 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.
[220414] 리액트에서 이벤트 생성하기 1. 이벤트명은 Camel 형태로 쓰기 html에서 이벤트를 만들때 버튼 리액트에서 이벤트를 만들때는 지정되어있는 함수를 쓸때는 Camel 형태로 사용해야한다. Camel형태로 안 쓰면 실행 자체가 안 된다. class Login extends React.Component{ state = { name:'ingoo2' } render(){ return( {this.state.name} ) } } 2. 이벤트는 익명함수로 감싸기 render() 자체가 내 안에 있는 코드는 모두 실행할게!!라는 함수다. 따라서 onClick함수가 바로 실행되기때문에, 사이트가 렌더되자마자 클릭하기도 전에 알람창이 뜨게된다. 버튼할때 클릭을 하려면 익명함수로 감싸게 되면 된다. 왜? 함수가 호출되지 않으면 실행이 될 수 없기 .. 2022. 4. 16.
[220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component) 한 페이지를 그릴때 , 보여지는 화면에 관련된 모든 컴포넌트를 가져오는 리액트의 습성때문에 기본적인 요청&응답이 길다. 예) 로그인 버튼을 누름 -> 로그인에 관련된 컴포넌트 모두 가져옴. 데이터를 건드리지 않고 화면을 모두 그리고 난 후에는 완료되었다는 신호를 준다. ComponentDidMount라는 신호 (DOMContentLoad와 목적이 같음) 여기부터 비동기통신인 AXIOS를 사용해서 비동기적 통신으로 데이터와 접속함. 리액트는 NODEJS와 webpack의 도움을 받아서 이루어진다. webpack : 100개의 서로다른 js를 1개의 js로 통합시켜주는 번역기 ( = 번들파일) 왜? -> 다른 js 파일을 만들다보면 변수명이 겹치게 되는데 그런 일을 방지해줌. 등장배경 -> require이 .. 2022. 4. 15.
[220413] 리액트 시작하기 (react, react-dom, 컴포넌트) 사전지식 자바 프레임워크라고도 부르고, 자바 라이브러리라고 부르는 리액트. 조금 자세히 따지자면 프레임워크에 가깝다. 라이브러리 : 폴더 구조가 없음 프레임워크 : 폴더 구조가 있음 1. react 시작하기 react는 react문법을 사용해서 작성한다. react-dom은 바뀐 값을 찾아서 그 영역만 바꿔준다. 주로 맨 마지막 한줄만 사용함 1-1. react 문법 버튼을 리액트로 만드는 코드 //인자값 3개 들어가는 React.createElement() //첫번째 인자 : 엘리먼트 명 //두번째 인자 : 속성값 //세번째 인자 : innerHTML React.createElement('button', null, '버튼') 1-2. react-dom 문법 //ReactDOM.render() //첫번째.. 2022. 4. 15.

티스토리툴바