전체 글

[React.js] async / await 비동기 사용법

비동기란, 순서대로 이루어지도록 하는 것이다. A가 실행되고나서 B가 실행되도록, 일련의 과정에 대해 순차성을 강제해주는 것이다. 위처럼 async-await을 이용하여 구현할 수 있고, 이 경우 getMovies() 함수는 비동기로 진행될 것이며(async), axios.get(...)을 기다릴 것(await)이다. 아래와 같이 사용할 수도 있다.

[React.js] 컴포넌트 생명주기

:::참고::: ko.reactjs.org/docs/react-component.html#constructor 리액트는 수많은 컴포넌트로 구성되어있고, 각 컴포넌트는 생명주기(life cycle)이라는 개념을 갖는다. 생명주기란 쉽게 말해서, 컴포넌트가 프로그램에서 어떻게 생성되고, 업데이트 되고, 삭제 되는지의 3단계를 의미하는 것이다. 이 생명주기 3단계를 용어로서 표현하자면 다음과 같다. 1. 마운트(Mount): 컴포넌트의 생성 2. 업데이트(Update): 컴포넌트 업데이트 3. 언마운트(Unmount): 컴포넌트의 제거 1. 마운트(Mount) 마운트는 컴포넌트의 새로운 인스턴스가 생성되어 DOM 상에 삽입될 때에 실행되는 과정이다. 일련의 함수들이 순차적으로 실행되며, 종류는 다음과 같다. ..

[React.js] setState() / state 값 갱신

setState는 이미 존재하는 state를 바꿔주는 역할을 하는 함수이다. 왜 state를 변경할때는 setState를 해야하는가? 더하기 빼기를 해주는 간단한 원리를 구현 할 때, state를 직접 조작하는 경우 다음과 같이 실행된다. 여기서 빨간색 네모를 보면 경고가 발생한 것을 알 수 있는데, state를 직접 변경하지 말라는 뜻이다. 이게 왜 뜨냐면, state를 단순히 바꾼다고 해서 렌더링이 다시 되지는 않기 때문이다. 즉, state의 값을 그냥 바꿔주어도, 렌더링이 다시 되지는 않으니, 웹의 값이 바뀌지는 않게 되는 것이다. 따라서 state의 값을 변경하고 싶을 때는 setState()함수를 이용하여 값을 바꿔주어야한다. 위와 같이 setState를 사용하게 되면, state를 바꿔줄 수..

[React.js] React application 새로 만들기 / react app 새로 만들기

yarn global add npx npm i npx -g npx create-react-app "앱이름" 위 두줄의 명령어: 최신 버전의 npm, yarn 설치 맨 밑 명령어: 앱 설치

[React.js] Warning: Each child in a list should have a unique "key" prop. 경고 문구 없애기

리액트 공부중 다음과 같은 경고문을 확인했다. 이때 사용된 코드는 다음과 같다. 이 에러를 없애는 방법은 간단하다. Movie 컴포넌트를 사용할 때, key prop을 넣어주면 된다. 배열을 통해 object들을 저장하고 사용함으로서 key가 요구되는 것 같다. 따라서 "id" 속성을 배열 내 각 object들에 넣어주고, 오브젝트 호출 시 key = {movie.id}를 통해 고유한 key 값을 지정해주면 된다. id를 따로 만들어주지 않고, 다른 속성값으로 key prop을 설정해주어도 된다. 하지만 id를 사용하는 것은 데이터의 기본이니, 이런 꼼수보다는 정공법이 나을 거라 생각된다.

[React.js] 리액트 반복문 map() 함수

리액트에서 여러 컴포넌트를 불러올 때는 map() 함수를 사용할 수 있다. 이 map 함수는 어떤 배열에 대해 각각 정해진 함수를 실행시켜주는 것이고, forEach함수와 비슷한 것 같다. 물론 map이 아닌 단순 반복으로도 컴포넌트들을 가져와서 사용할 수는 있다. 그럼에도 map함수를 사용하는 이유는 다음과 같다. 1. 코드는 짧고 간결할수록 좋다. 2. 실제 데이터는 사전에 한번에 정의하여 사용할 수가 없다. 2번 예시의 이유가 사실 더 큰데, 실제로 영화리스트를 만든다고 하면, 사용하면서 새로운 영화들이 계속 추가되어야 할 것이다. 하지만 그 때마다 새로 Movie 컴포넌트를 추가하여 출력한다고 할 경우, 불필요한 코드 수정 요소가 생길 수 있다. 따라서 배열을 통해 영화 데이터들을 관리하면서, m..

[React.js] component 와 props

1. Component 우선, 리액트는 HTML에 직접 요소를 넣지 않는다. 기본적으로 index.html에 들어갈 내용을 index.js에서 불러와 사용한다. 이를 렌더링이라고 하고, 그 내부 요소들을 component라 한다. 이렇게 렌더링을 진행하는데, 이때 직접 렌더링 할 수 있는 component는 오직 하나이다. 따라서 보통 App.js를 렌더링하고, App.js 내 App() 함수에서 다른 component들을 사용하게 된다. 굳이 뽑자면 component는 함수이다. 다른 js파일을 생성하고 그를 import해 사용하더라도, 결국 그 js파일 내에 함수를 불러다가 사용하는 것과 같다. 2. Props Props란 부모 component가 자식 component에게 넘겨주는 매개변수라고 생각..

[신규 코인 에어드랍] ALN 토큰 에어드랍

Aluna.Social은 암호화폐 거래자와 투자자를 위한 멀티 거래소 소셜 트레이딩 터미널입니다. API 거래 터미널과 소셜 네트워크 및 게임화를 결합하였습니다. 전문 트레이더들은 재정적으로나 평판적으로 보상을 받고, 초보자들은 세계 최고의 트레이더들의 전략을 자동 복사하여 사용하면서 배울 수 있습니다. Aluna.Social은 10,000 USD 상당의 총 100,000 ALN 풀을 에어드롭합니다. 몇 초만 사용하여 계정을 생성하고, 필요한 작업을 완료하고 에어드랍이 끝나는 대로 토큰을 얻습니다. 추가 작업을 완료하고 친구를 추천하여 더 많은 ALN을 획득합니다. 참여 기한: 2021-01-28 ~ 2021-03-25 총 보상: 100,000 ALN 플랫폼: ETH 참여 방법: Aluna.Social ..

[USDT 에어드랍] StromGain Bonus Deposit 에어드랍

이번 StromGain 에어드롭은 모든 참가자들에게 25 USDT(2012-02-19 07:11 기준 1 USDT / 1,107\) 를 제공합니다. 100 USDT 이상을 입금하면 25 USDT 토큰에 최대 15%를 더한 웰컴 보너스를 활성화할 수 있습니다. Bitcoin.com에 따르면 StormGain은 Binance의 그늘에서 벗어날 수 있는 새로운 창조적인 암호화폐 거래소입니다. 이 플랫폼은 실제 계정 거래를 시뮬레이션할 수 있는 무료 데모 계정(테스트 계정)을 제공하면서, 실제 거래를 위한 두 가지 옵션이 추가로 존재합니다. 초보자에게 알맞는 전통적인 방식과, 숙련된 거래자들이 몇 백 배 곱하여 거래할 수 있는 진화된 방식이 그것입니다. 또한 StormGain은 동류의 업체들 중 최저가의 수수료..

[비트코인 & VALOR 토큰 에어드랍] BTC & VALOR 에어드랍

SMART VALOR는 토큰화된 대체 투자를 위한 최초의 분산형 글로벌 시장입니다. SMART VALOR는 전 세계의 사람들이 디지털 자산에 쉽고, 안전하며, 준수하게 접근할 수 있게 하는데 그 목적을 두고 있습니다. SMART VAROR는 20＄상당의 BTC를 신규 사용자에게 공개하고 있습니다. SMART VALOR에서 계정을 생성하고 KYC 인증을 완료한 후 최소 100＄ 상당의 암호화폐를 구입하여 가입 보상을 받아보세요. 또한 아래 언급된 거래 대회에 참가하면 최대 6,000＄의 보상까지 받을 수 있습니다. 마지막으로 최대 5번까지 추천 1번당 200달러 상당의 VALOR 토큰(2021-02-18 10:08 1 VALOR / 377.74￦)을 받을 수 있습니다. 홈페이지 내에서 한국어가 지원되므로,..