react 썸네일형 리스트형 코알누-리액트 lifecycle lifecycle 강의도 들었는데 아직 잘 모르겠다..(다음 강의 lifecycle을 활용한 리액트에서 활용해보자) ⌘updating state가 업데이트되고 ui업데이트 될때 unmounting 컴포넌트가 종료될때 리액트의 총 3개의 lifecycle : Mounting,Updating,Unmounting function버전의 Lifecycle = useEffect(함수) 1. 콜백함수 2.array useEffect는 componentDidmount를 커버해준다.(아무것도 없으면 componentDidmount()처럼 작동) api호출 작업을 useEffect에서 함 이 배열에 state값을 넣어놓으면 리액트가 주시하는거 counter2값 잘 보고 있으래 counter2 state값이 완전히 변하면 .. 더보기 코알누 클래스 컴포넌트(옛날 방식이지만 중요한것) 코알누 강의에서 state영상 다뤘던게 있는데 그걸 가져와보자. rcc 코드 단축키 사용 import React, { Component } from 'react' export default class AppClass extends Component { render() { return ( AppClass ) } } export default class AppClass extends Component { constructor(props){ super(props) this.state={ counter2:0, } } 클래스를 생성할때 constuctor가 사용된다. increase=()=>{ this.setState({counter2:this.state.counter2+1}) } 이게 기존의 함수형 컴포넌트랑 .. 더보기 코알누 리액트 가위바위보-3 승패를 보여주기 위해서 const[result,setResult]=useState('')//승패를 보여주는 결과값을 보여주기 위해서 result의 값을 보여준다. {props.result} judgement(choice[userChoice],computerChoice)//유저선택값,컴퓨터선택값 가위바위보 로직을 스스로 생각해보자. 가위바위보를 내가 어떻게 하면 구현할수 있을까 -내가 가위 냈을때 컴퓨터가 가위,바위,보 중에 하나 -내가 바위 냈을때도 마찬가지 -내가 보 냈을때도 마찬가지 if(user.name == computer.name){ return "tie" }else if(user.name=="Rock")return computer.name=="Scissors"?"Win":"lose" else .. 더보기 코알누 리액트 가위바위보-2 이제 컴퓨터는 랜덤하게 선택되는걸 한번해보자.(컴퓨터의 state를 생성해두자.) computer도 item을 생성해준후 유저가 아이템을 선택할 때 그 순간은 play()함수가 실행될때이다. 그래서 play()함수 내에서 컴퓨터가 랜덤하게 값을 선택해주는 작업을 해줄것이다. randomChoice라는 함수를 만들어주자. const randomChoice math.random으로 컴퓨터에서 랜덤으로 값을 받게 해줌 0~1사이의 값을 반환 근데 숫자랑 어떻게 가위 바위 보랑 연결이 될까? 이런게 알고리즘 문제 이 아이템과 숫자를 연결짓는 방법은 알고리즘 문제와 비슷한데 배열이라고 코알누는 설명하고 있음. 배열에 아이템이 들어가 있으면 아이템 각각에 index번호가 자동으로 부여가 됨 이 값을 math.ran.. 더보기 코알누 리액트 가위바위보-1 선택도 안했는데 선택됨 이렇게 세개가 떠버렸다. 왜그럴까? 리액트는 ui를 그려주기에 함수를 실행시킨다 위의 코드를 보면 play() 이렇게 작성했는데 콜백함수로 작성해줘야 한다. play("scissors")}>가위 play("rock")}>바위 play("paper")}>보 //1. 박스2개 (타이틀,사진,결과) //2. 가위 바위 보 버튼이 있다. //3. 버튼을 클릭하면 클릭한 값이 박스에 보임 //4. 컴퓨터는 랜덤하게 아이템 선택이 된다. //5. 3 4 의 결과를 가지고 누가 이겼는지 승패를 가린다. //6. 승패결과에 따라 테두리 색이 변한다. (이기면 초록 지면 빨강 비기면 빨강색 ) 버튼을 클릭하면 클릭한 값이 박스에 보이게 할건데 state를 사용해볼거다. const choice = .. 더보기 코알누 react- state - counter는 한번 클릭했으니까 1이 맞는데 counter2부분은 왜 0부터 시작?? 일단 ui바꾸는게 비싸서 시간이 걸림(비동기적) setCounter2(counter2+1)은 함수가 끝나면 차근차근 실행을 해나감 변수는 바뀌면 바로 적용이 되지만 state 바꾸는건 비싸다 - counter는 왜 항상 1일까? setState 숫자를 바꾸는 순간 리렌더링 컴포넌트를 다시 그려준다.(다시 초기화시킴) state같은경우 그 전의 값을 기억을 해둠 react가 주시하고 있는 값(변수는 주시하지 않는다.) 정리: 유저가 버튼을 클릭한다. counter+1해서 1이 된다. setState함수를 호출을 한다. console.log실행됨 변수값은 1로 보이고 state값은 아직 안변했기 때문에 그전의 값이 보.. 더보기 코알누 react - component/props 그런데 이렇게 노가다식으로 계속 만들어줘야하나? .. component폴더안에 Box.jsx생성 rafce= 리액트 컴포넌트 자동으로 만들어줌 이거를 리액트에서 컴포넌트라고 부른다. Props 더보기 리액트 (생활코딩) useReducer 일반적인 props 사용시 직접 state를 변경해줘야 함 (react의 한계) 나는 무선통신으로 하고 싶은데 유선으로 거쳐서 모든걸 바꿔준후에야 내가 바꿀수 있다.. 그래서 아래 사진과 같은 state로는 action으로 내가 요청만 하고 나머지는 직원들이 알아서 해주게 하는 reducer를 알아보자 // 장부 : 입출 내역을 기록한 문서 // 회계직원 : 출금과 입금을 기록하고 법대로 잘음....이해 하기 쉽게 어머님이 가계부를 쓰시죠? 어디에 얼마를 썼고, 대출은 얼마이고 이런거를 법에 맞게 해주는 사람들 입니다. // 창구 : 은행직원이고 출금고 입금을 도와주는 사람들 은행은 장부와 고객이 핵심 state가 장부같은거 고객은 event가 발생했을때 작업하는 함수들 은행을 만들때는 useState(.. 더보기 이전 1 2 3 4 다음
