# componentDidMount

20개의 포스트
post-thumbnail

state Life-cycle

React에서 컴포넌트는 "생명주기 메소드를 가지며 이 메소드를 오버라이딩(상속하여 재정의) 해서 특정시점에 코드가 실행되도록 설정할 수 있다.클래스컴포넌트에만 해당되며, 함수형 컴포넌트에선 Hook을 사용하여 이와 같은 역할을 하게끔 한다.1) componentDid

2022년 6월 11일
·
0개의 댓글
·
post-thumbnail

Class Component

클래스형 컴포넌트 정의와 생명 주기 메서드, 그리고 클래스형 컴포넌트로 컨텍스트에 접근하는 방법

2022년 1월 27일
·
0개의 댓글
·

리액트2(Props와 State)

Props : 컴포넌트 외부에서 컴포넌트에게 주는 데이터 State : 컴포넌트 내부에서 변경할 수 있는 데이터 둘 다 변경이 생기는 경우 render(컴포넌트 그리는 방법을 기술하는 함수)가 다시 일어날 수 있음. > Function Component (defau

2022년 1월 9일
·
0개의 댓글
·
post-thumbnail

React : state 변경 방법 componentDidMount 활용 / setState , setTimeout 사용

우선 리액트 공식문서를 보면컴포넌트 생명주기모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다. 이 생명주기 도표를 필요할 때마다 활용하면 좋습니다. 아래 목록에서 자주 사용되는 생명주

2021년 12월 8일
·
0개의 댓글
·
post-thumbnail

[팀프로젝트] Lush clone-검색페이지

구현기능 onClick, onKeyPress을 통해 검색결과페이지로 이동 withRouter 로 history, match, location 객체 접근Search.jshandleSEarchResult는 onClick 이벤트에 해당되는 함수이다.인풋창에 값이 1

2021년 10월 17일
·
0개의 댓글
·
post-thumbnail

[React #7] Component Lifecycle(생애주기) Methods

Component Lifecycle React components는 create, render, DOM에 추가, 업데이트, 삭제될 수 있다. 이 스텝들이 컴포넌트의 생명주기(lifecycle)라고 한다. Mounting : 컴포넌트가 초기화되고 DOM에 놓이는 첫 순

2021년 10월 12일
·
0개의 댓글
·
post-thumbnail

[react] monster 과제 리뷰

monster 과제 리뷰

2021년 10월 4일
·
0개의 댓글
·

TIL. 33 React - fetch 함수를 통한 API 호출

💡 fetch 함수 > methos 패치 함수의 메소드 중 GET은 데이터를 단방향으로 받을 때 사용하며, POST는 서버와 통신하며 서로 주고 받을 때 사용한다. componentDidMount() 기본적인 리액트 Lifecycle은 바로 render 함수가

2021년 7월 4일
·
0개의 댓글
·
post-thumbnail

[react] 노마드코더 영화웹서비스 제작 3.2 컴포넌트의 생명주기 메서드

react component에서 사용하는 유일한 function은 render function이지만, 그외에도 많은 것들을 가지고 있다.life cycle method라는 것들을 가지는데, 리액트가 컴포넌트를 생성하고 없애는 방법이다.component가 생성될 때,re

2021년 5월 28일
·
0개의 댓글
·
post-thumbnail

창 열기, 닫기 버튼 애니메이션 적용하기

close 버튼을 눌렀을때 로그인 창이 꺼지는 기능 구현.

2021년 5월 11일
·
2개의 댓글
·
post-thumbnail

useEffect

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정하도록 설정할 수 있는 Hook 이다. 클래스형 컴포넌트의 componentDidMount 와 componenetDidUpdate 를 합친 형태로 보아도 무방하다.Info.js마운트될 때만

2020년 8월 5일
·
0개의 댓글
·
post-thumbnail

componentDidMount 2

이런 식으로 이름표를 달아서 콘솔에 확인해볼 수 있다.hello라는 스트링 뒤에 값이 들어오는 것을 확인할 수 있다.hello: 값 이 state에 저장되게 해야한다.state는 "컴포넌트의 저장소"이기 때문이다.따라서, setState를 써서 넣어주게 되면 다음과 같

2020년 7월 19일
·
0개의 댓글
·
post-thumbnail

componentDidMount()

값을 호출해서 state에 저장하면 계속해서 render가 또 작동된다.따라서, componentDidMount가 필요하다."최초에 한번만 하면 된다."를 작동하려면componentDidMount()를 쓰면 된다.componentDidMount() {}이 안에 fetc

2020년 7월 19일
·
0개의 댓글
·
post-thumbnail

[React] Data 호출을 위한 fetch()

문제.............................1\. index.js API 호출 주어진 API주소를 호출하여 데이터 로딩을 처리한다.componentDidMount()fetchsetState (monsters 에 저장)\*index.jsCardList 컴포넌

2020년 6월 17일
·
1개의 댓글
·
post-thumbnail

SMG TIL #7 - ReactJS에서 fetch()함수를 이용한 API호출 (feat.componentDidMount)

벨로그에서 처음 API에 대한 언급을 했는데,여기서 API란 무엇일까 ?API : 응용 프로그램에서 사용할 수 있도록, 운영 체제 혹은 프로그래밍 언어에게 제공하는 인터페이스(규격)을 의미짧게 결과적만 말하자면 API를 통해 데이터를 제공 받을 수 있다.어제 과제를 설

2020년 6월 17일
·
0개의 댓글
·

(TIL 45일차) useEffect 및 Eslint 자동적용 문제 (소켓 통신)

useEffect 올바른 사용법 eslint 자동적용 문제

2020년 3월 18일
·
0개의 댓글
·
post-thumbnail

[+35]ComponentDidMount뒤에 render시키기

mock-data를 이용해서 componentDidMount에 fetch를 시켜서 render를 시키려고 했는데 문제가 발생했다.mock data에서 fetch로 가져올 정보는 이 product였고componentDidMount에 fetch를 시켜줬다.render되는

2020년 3월 2일
·
0개의 댓글
·
post-thumbnail

useEffect에 대한 짧은 가이드

들어가기 전에 이 글은 useEffect API에 대해 어느정도 익숙한 독자를 위한 글입니다. 그리고 오역과 의역이 많을 수 있으니 이상하다 싶은 부분은 원래 문서를 참고해주시기 바랍니다. A Complete Guide to useEffect - Dan Abramov 에서 정보를 얻어 번역하였습니다. I got information from here an...

2019년 5월 13일
·
1개의 댓글
·