목록2021/03/21 (5)
hmk run dev
클라이언트가 입력한 값을 받아올 수 있는 인풋박스 만들기 > 클래스형 컴포넌트라면 constructor안에 this.text = React.createRef(); Ref변수 만들기 > 인풋 박스안에 ref 달아주기 > Ref 값(인풋의 value값) 가져와서 state 업데이트 해주기 여기선 함수를 만들어 주는게 좋다(참고로 constructor 밖에선 const 필요) > setState + 스프레드문법으로 state 안의 배열에 새로운 배열을 추가 함으로써 버킷리스트 추가 가능 스프레드 문법 > [...배열이름, 추가하고 싶은 배열이나 요소] 이렇게 써주면 배열값을 하나하나 나열하고 거기에 요소를 더 해줄주어 새로운 배열을 만들 수 있다 class App extends React.Component {..
useState()를 사용한다! 함수형 컴포넌트를 하나 만든다 >> export App.js에서 import 근데 개인적으로 왜 배열을 for문 같이 돌려주냐를 생각해봤다 const nemo_count = Array.from({ length: count }, (v, i) => i); 이렇게 카운트의 숫자를 배열길이로 가진 배열을 하나 만들고 아래 처럼 맵을 사용해서 for 반복문 처럼 돌린다// 즉 유기적으로 count 스테이트 값을 이용해 반응형? 으로 만들기 위함 이라고 생각한다 {nemo_count.map((q, idx) => { // for문이랑 비슷 [0,1,2]인 배열을 num이란 요소로 돌려버리고 idx는 순서값을 나타나게함 idx가 3이니까 대충 3번 돌려준단 말 같다 return ( 뷰만..
스테이트를 관리한다는 것은 한마디로 스테이트를 생성 업데이트 삭제하는 과정이라고 볼 수 있다 컴포넌트가 데이터를 어떻게 관리할까? state는 단방향 데이터 관리이다. 자식이 부모에게 영향을 못끼친다! 라이프 사이클에서 리렌더링 업데이트가 되는 경우 1. state 업데이트 2. props 업데이트 3. 부모 컴퍼넌트 재렌더링 4. 강제 업데이트 클래스형 state 관리 클래스형에서 state를 쓸릴 있으면 this.state.(스테이트 요소) 를 앞에다 항상 붙여줘야하며 스테이트를 이용해 배열을 만들어서 변수로 지정해주고 그것을 map으로 돌려서 리턴 값을 네모로 주면 스테이트값을 이용해서 네모 더하기 빼기를 구현 할 수 있다 import React from "react"; class App exten..
1. constructor() : 생성자 함수라고도 부릅니다. 컴포넌트가 생성되면 가장 처음 호출되는 친구죠! 컨스트럭쳐 안에서 props, state 생성? 해줌 2. render(): 리턴 값으로 ui요소를 반환함 우리가 만들어 둔 컴포넌트들을 출력? 해주는 친구 state, props 데이터를 꺼내서 보여줌 3. componentDidMount() 컴포넌트 들이 화면에 나타나는 것이 완료되면 그 순간 실행됨 첫번째 렌더링 후 딱 한번 실행 // 재 렌더시 작동 x ajax 호출, 함수호출, 이벤트 등록 4. componentDidUpdate() 컴포넌트 디드마운트가 첫 렌더에만 출력된다고 하는데. 이 친구는 리렌더링을 완료한 후에 실행된다. 이 함수에 중요한 파라미터가 2개 있는데, prevProp..
항해를 시작한 지도 어느덧 3주 차가 되어간다. 이번 주도 저번 주에 이어서 알고리즘 공부를 이어 나갔는데 문제 난이도 또한 저번 주보다 높아져서 벽을 느끼면서도 이해하려고 노력했던 것 같다 자신에 대한 답답함과 알고리즘에 대한 두려움을 느꼈던 2주였지만 뒤돌아 보면 파이썬 문법도 몰랐던 내가 다소 난이도가 낮은 알고리즘 문제를 풀어내는 모습을 보면서 신기했다. 물론 DFS & BFS와 같은 난이도의 문제들을 풀기에 다소 역량이 부족하지만 앞으로 남은 항해 과정 동안 주특기로 선택한 리액트 공부, 프로젝트 중에도 틈틈이 공부를 해야겠다고 다짐했다! 그리고 팀원들과 협업하는 것에 대해서 많이 배웠던 한주였다. 3명의 팀원들이 비슷한 배경지식을 가지고 있어 서로 공감하고 협업하는데 도움이 많이 됐다 서로의 ..