반응형

전체 글 104

3. React Hook(1) useState(), useEffect()

3-1 Hook이란?함수형 컴포넌트에서 State와 생명주기(Life Cycle)을 연동(hooking)한 함수입니다.Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있습니다.기존의 class형 컴포넌트도 사용은 가능하지만 가급적으로 새로 만드는 프로젝트는 Hook으로 사용하길 권장하고 있기 때문에 우리는 React, React-Native를 배우기전에 Hook을 공부할 필요가 있습니다. https://levelup.gitconnected.com/an-introduction-to-react-hooks-50281fd961fe 3-2 React Hook을 사용하는 이유기존 React에서는 State와 관련된 로직을 재사용하기 어렵다.로직을 재사용하기 위해 Compon..

React-Native 2021.01.22

2. React Component(리액트 컴포넌트)

2-1 개요컴포넌트는 props를 받아서 UI가 어떻게 보여야하는지 정의하는 React Element를 출력하는 일종의 함수입니다. UI를 구성하기 위해서는 화면에 컴포넌트를 생성하고(Mounting), 업데이트하고(Updating), 지워야(Unmouning)합니다. 아래에서 자세히 다루어 보겠습니다. 2-2 Props와 State컴포넌트는 2가지 인스턴스 속성(property) props와 state를 가지고 있습니다. Props부모 컴포넌트가 자식 컴포넌트에게 주는 값자식 컴포넌트에서는 props를 받아오기만 하고, 받아 온 props를 직접 수정 불가능(읽기전용) State컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. → 부모컴포넌트로부터 props를 받아서 그 props에 대해 st..

React-Native 2021.01.22

[Programers]크레인 인형뽑기 게임(JavaScript)

출처https://programmers.co.kr/learn/courses/30/lessons/64061 ❓Question게임개발자인 죠르디는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. 죠르디는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다 게임 화면은 1 x 1 크기의 칸들로 이루어진 N x N 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 5 x 5 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 1 x 1 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장..

CodingTest 2021.01.21

1.React란??

1-1 개요오늘은 React가 무엇인지 중점으로 포스팅을 할 예정입니다.ReactNative를 배우기 전에 React에 대해서 조금 알고 넘어가야하는 부분이 있기때문에 처음에는 React위주로 다루어볼려 합니다. 향후 계획은 ReactNative를 중점적으로 포스팅할 예정이며, React에서는 Component와 Hook위주로 설명하고 넘어가겠습니다.도움이 되시길 바라면서 시작하겠습니다 🙏 1-2 React React는 JavaScript 라이브러리 중 하나로서 사용자 인터페이스(UI)를 만들기 위해 사용됩니다.React말고도 Angular, Vue.js 등 다양한 프론트 엔드 프레임워크가 존재하는데 2020년 기준 React가 점유율이 가장 높습니다. https://www.lambdatest.com/b..

React-Native 2021.01.21
반응형