목록React/basic (28)

개발노트

12. componentDidUpdate , setInterval

1~45까지 숫자만들어서 섞어서 7개 반환하는 함수 function getPickNumbers(){ console.log('pickNum START'); const numArray = Array(45).fill().map( (v,i) => i + 1 ); // 1~45정수 배열 만듬. const shuffle = []; while( numArray.length>0 ){ //1~45를 랜덤하게 섞기 위해서 shuffle.push( numArray.splice( Math.floor( Math.random() * numArray.length ) ,1)[0] ); // (1~10랜덤) * 45 한다음 45,44 랭스 바뀌게 이렇게 그숫자 하나씩 제거 (곱하는건왜하는건지? 알고리즘인데,) //그숫자 push } ..
React/basic 2020. 7. 27. 23:18
11 (2)hooks / useEffect

우선 훅스에는 라이프사이클없으니까 제외한 나머지를 훅스로 변경 import React, { useState , useRef } from 'react'; const rpsCoords = { rock:'0px', scissor: '-142px', paper: '-284px', }; const score = { scissor: 1, //가위 rock:0, //바위 paper:-1 //보 } //컴퓨터가 어떤손 내는지 판단 const computerChoice = (imgLocation)=>{ return Object.entries(rpsCoords).find( function(v){ return v[1] === imgLocation; })[0]; } const RPS =()=> { const [ result,..
React/basic 2020. 7. 26. 21:45
11. react life cycle

리액트의 라이프 사이클 render 함수가 실행되면 DOM에 (render)함수를 붙여주는데 붙여주고난 그 순간에 이벤트잡아서 원하는 설정이 가능함 그게 componentDidMount, 컴포넌트가 첫 렌더링 된 후 componentDidMount -비동기 요청 컴포넌트가 제거되기 직전 componentWillUnmount (부모컴포넌트가 자식컴포넌트 없앴을때 자식이컴포넌트가 없어지기(unmount)전에 실행됨) 리렌더링후에 실행 componentDidUpdate -비동기 요청의 삭제 (컴포넌트를 삭제해도 만약 setInterval을 걸었을 경우 계속실행됨) 클래스컴포넌트 constructor state부분 render (ref) componentDidMount setState/부모가props바꿀때 ->..
React/basic 2020. 7. 26. 20:38
10. (4)jsx 에서 for, if

jsx 구문 안에서 if const getAverage = () => { return result.length === 0 ? null : 평균시간: {result.reduce((a,c)=>a+c) / result.length} ms 리셋 } return ( {message} { getAverage() } ) return ( {message} { ( ()=>{ if(result.length === 0 ){ return null }else{ return (평균시간: {result.reduce((a,c)=>a+c) / result.length} ms 리셋); } })() } {/* { getAverage() } */} ) jsx안에 {} 쓰면 javascript쓸수 있으므로 즉시실행함수()=>{} 와 같이 i..
React/basic 2020. 7. 26. 16:24
이전 Prev 1 2 3 4 5 6 7 Next 다음