본문 바로가기

TIL -일간학습기록/React9

Use effect 의 defendency array 에 대하여 use effect 2022. 5. 23.

API, UseEffect로 관리하기 Use Effect가 아직 어떤 녀석인지 잘모르겠다.. 공식문서 확인 고고 UseEffect = 함수 컴포넌트 내에서 side Effect 를 처리하기 위해 사용한다. *Side Effect란 함수가 실행되면서 함수외부에 존재하는 값이나 상태를 변경시키는 행위이다. ex) 함수내에서 전역변수의 값을 변경시키거나 함수외부 버튼의 텍스트를 변경하고, 네트워크를 통해 데이터를 송신하는 것등이 있다. 함수는 전달받은 매개변수를 통해 연산을 수행하고 결과를 반환해야하며 결과는 항상 일관되고 예측 할수있어야한다. 그래야 프로그램이 쉽고 단순하며 유지보수 하기가 쉬워지기 때문이다. 리액트에는 절차형 프로그래밍에서 흔히 존재하는 작업인 Side Effect 처리를 위해 Use Effect() 함수가 있다. 예시를 활용.. 2022. 2. 17.

Stateairline-client 과제 [React] 데이터 흐름의 이해와 비동기 요청 처리 이틀에 걸쳐 데이터의 흐름, state상태 끌어올리기와 useEffect AJAX요청에 대해 공부했다. 리액트의 컴포넌트는 1가지의 일만 하고 단방향의 데이터 흐름을 가진다. 그래서 데이터를 어디에 담아줘야할지 정해줘야한다.(데이터정의) 부모가 데이터를 가지고 자식에게 props(읽기적용)로 내려준다(인자 혹은 속성처럼 내려줌) 자식은 데이터를 내려받지만 데이터가 어디에서 왔는지는 알지못한다. [상태끌어올리기] 데이터의 흐름이 top-down 방식이지만, 자식컴포가 부모컴포의 상태를 바꿔야하는 경우에는 (예. 자식컴포에 전송버튼이 있어 클릭시 부모의 데이터 목록이 업데이트 되어야 하는경우) 부모컴포내에 상태를 변경하는 함수를 두고 자식컴포에 이 상태 .. 2022. 2. 9.

Weather API & data component 오늘자 todolist 작업 1. 와이어 프레임 + 컴포넌트 나누기. 2.Data , Weather Component 만들기. 1. 와이어 프레임 + 컴포넌트 나누기. 전체 페이지는 App에 띄우고, 다른 컴포넌트들은 각자 할일을 작게 나누어 만들기로 했다. App에 표시될 컴포넌트 외에는 List폴더에 따로 담아두었다. 어떻게 state와 props를 내려주어야 할지 헷갈릴것 같아서 부모자식간의 트리구조도 표현해봤다. 매일 반복할 일정을 띄울 DayLoop와 당일 일정후엔 리셋 될 TodoList는 AddList를 통해 사용자가 일정을 추가할때 토글버튼을 이용해 맞는 컴포넌트Prop으로 내려 줄 예정. remove는 어디에 포함해야할지 잘모르겠어서 진행하다가 끼워넣을거 같은데 아마 addlist에 들어.. 2022. 2. 5.

[React 자습서] Tic Tac Toe.. 투두리스트를 시작 하기에 앞서 리액트를 너무 모르는거 같아, 공식문서 자습서의 틱택토를 공부하고있다. function Square(props) { return ( {props.value} ); } class Board extends React.Component { constructor(props){ super(props); this.state = { squares: Array(9).fill(null), xIsNext : true, }; } handleClick(i) { const squares = this.state.squares.slice(); if(calculateWinner(squares) || squares[i]){ return; } squares[i] = this.state.xIsNext ? '.. 2022. 2. 3.

[TodoList]create react app 설치 프론트엔드 개발셋팅을 도와주는 툴 인 create react app 을 이용하여 투두 리스트를 시작하려고 한다 터미널에 `npx create-react-app todo` 를 넣었는데 뭔가 에러가뜸. 읽어보니 버전의 문제인것같고 해결하기 위한 명령어와 참고할 사이트 주소를 알려주어서 검색해봄. 리액트 공식문서에 가보니 이전에 create react app을 전역적으로 설치하였을 경우 삭제후 재설치하여 항상 npx 최신 버전을 사용하는것을 권장함. 그래서... 위의명령어로 삭제 해보려했는데 뭔가...무서워서 npm 버전 확인후 업데이트 하는법을 검색 해서 -g를 넣은 (-g는 global로 전역 설치?? 를말하는것 같다 npm 명령어 인듯) cra를 다시 설치 해봤지만 이버전은 안쓰이는 버전인것같다. 얼른 .. 2022. 1. 30.

리액트로 Todo list를 만들어보자 투두리스트를 쓰고싶은데 마음에 드는게 없어서 만들어보기로함 공부에 도움될수있도록 리액트 날씨api 비동기(어디서 들어가야할진 모르겠지만..) 부캠에서 배우는것들을 되도록 많이 사용해볼예정 2022. 1. 30.

REACT - 21.12.26 - JSX, STATE, PROPS 학습목표 REACT & JSX React의 3가지 특징에 대해서 이해하고, 설명할 수 있다. JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다. React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다. create-react-app 으로 간단한 개발용 React 앱을 실행할 수 있다. SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다. SPA의 장, 단점에 대해 이해하고 설명할 수 있다. 와이어프레임을 보고 어느 부분을 컴포넌트로 구분해야 할 지 스스로 정할 수 있다. React에서 npm으로 React Router DOM을 설치(npm install react-router-dom@5.3.0)하고 이용할 수 있다. React.. 2021. 12. 26.

4W_JS_React Route 시간이 진짜 왜이렇게 빨리가는지 모르겠다. 메서드 공부하다 갑자기 리액트로 돌아온 블로그.. 그사이에 굉장히 많은 학습이 이루어졌지만, 어제 오늘 리액트 수업듣고 깨달았다. "..아! 여기까지 온것은 다 리액트 배우려고 온거구나!! " 그래서 마음이 편해졌다. 뒤로 구르든 옆으로 구르든 어쨋든 프론트엔드의 꽃, 리액트만 잘해도 반은가겠구나..! (물론 리액트 잘하려면 앞에 배운거 다잘해야함) 여하튼 어제의 기본문법에 이어 오늘은 라우터를 공부했고, 리액트 라우터의 주요 컴포넌트를 배운것 위주로 정리해보려한다. 먼저 라우터를 사용하기 전에 라우터 모듈이 들어있는 리액트 라우터 돔을 설치하여야한다. npm install react-router-dom@5.3.0 우리는 버전 5.3.0을 사용했는데 최신버전 받.. 2021. 12. 3.

이전 1 다음

티스토리툴바