이안의 평일코딩

리액트 초기 셋팅 최근 Vue를 계속 사용하다보니 리액트 초기 설정을 까먹어서 다시 기억하기 위해 써본다. 분명히 업로드한 것 같은데 블로깅이 안되어 있어서 다시 씀. 먼저, Nodejs 최신버전이 필요하다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 그리고 터미널(Mac) 또는 명령 프롬프트(Windows)에 아래와 같이 입력한다. npx create-react-app 프로젝트명 그리고 IDE에서(나는 vscode) 프로젝트명으로 만든 폴더를 open한 뒤 아래와 같이 입력하면 실행된다. npm run start 또는 yarn start (vue에서는 주구..

보통 리액트 네이티브를 첫 입문했을 때 API를 fetch해와서 Movie App을 만들거나 (Pokemon App도 만들긴함 ㅎㅎ) 아니면 CRUD을 첨가한 ToDo App을 만드는데 오늘은 간단하게 To do 앱을 만들어 보도록 하자. 결과물 VScode를 IDE로, Expo CLI를 이용했고 할일을 추가하고 체크하거나 아니면 X 아이콘을 눌려 삭제시키는 간단한 투두앱이다. App.js import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { Text, StyleSheet, View, Dimensions, Platform } from 'react-native'; import uuid fro..

App.js import { StatusBar } from 'expo-status-bar'; import React, {useState} from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default function App() { const [OutputText, setOutputText] = useState("Hi there! 👀") function buttonTapped(){ setOutputText("🎉 Welcome to React Native World!") } return ( {OutputText} ); } const styles = StyleSheet.create({ container: { ..

먼저 터미널에서 Expo를 전역으로 설치해줍니다. sudo npm install expo-cli --global 설치 후 프로젝트도 생성해줍니다. expo init 프로젝트명 cd 프로젝트명 expo start 그리고 Expo를 실행시켜줍니다. yarn ios

yarn이 설치되어 있다면 터미널에서 아래와 같이 입력하여 타입스크립트 프로젝트용 기초환경을 설정한다. $yarn create react-app 프로젝트폴더명 --template typescript 나는 TS-TodoList를 프로젝트명으로 하여 생성했다. 위와 같이 tsx파일로 타입스크립트 리액트 프로젝트 기본 셋팅 성공!

지난 블로깅에서는 state를 저장하고 사용하는 방법만 알아보았고, 이번시간에는 데이터 수정하는 방법에 대해서 알아보도록 하자. reducer 함수 state 데이터의 수정방법을 미리 정의하는 함수이다. state 초기값과 데이터 수정방법을 넣는다. function reducer(state = 초기값, 액션) 1. '수량증가'라는 데이터 수정방법 이름을 작명해서 넣어준다. (액션.type === 수정방법이름) 2. if문 안에 '수량증가'라는 요청이 들어올 경우 else if문에는 '수량감소'라는 요청이 들어올 경우 수정방법 정의. 3. else문 안에는 둘 다 안들어온 경우 기본 state를 결과값으로 가져올 것을 수정방법 정의. index.js let 초기값 = [ {id: 0, name: '멋진신발..

Redux란? Redux라는 라이브러리는 모든 컴포넌트 파일들이 같은 값을 공유할 수 있는 저장공간을 생성가능케 해주고 state 데이터를 관리하는 기능을 가지고 있다. Redux를 쓰는 여러가지 이유 중 하나는 props 전송없이 모든 컴포넌트가 state를 가져다 쓰는 것이 가능하기 때문에 컴포넌트가 매우 깊숙히 있다면 state를 전달하기 위해 props를 수십번 써야하고 귀찮은데 redux를 세팅하면 Context API와 같이 props를 수십번 쓸 필요없이 바로 꺼내쓸 수 있게 해준다. 설치방법 터미널에 yarn add redux react-redux 를 쳐서 2개의 라이브러리를 설치한다. (또는 npm install redux react-redux) 세팅하기 index.js에 를 import..

리액트를 시작하다! 리액트 입문 수업으로 생활코딩을 이틀에 걸쳐 완강했다. (수업링크 : opentutorials.org/module/4058) TMI이지만 사실 국비 과정이 풀스택인줄 알았는데 강의 중간 쯤 알고보니 백엔드 반이라는 사실을 깨달았다. 1차, 2차, 3차 프로젝트를 거치면서 점점 백엔드보다는 프론트엔드에 강력한 매력을 느끼게 되었고 독학을 결심. 이 글은 생활코딩님의 리액트 강의를 듣고 복습 겸 다시 정리해보는 글이오니, 글의 설명이 부족하다고 느낀다면 위의 수업링크를 통해 한 번 수강할 것을 적극 추천하며, 복습용으로 또는 오랜만에 상기용으로 빠르게 훑고 싶은 분들을 위한 글이라고 생각하면 될 것같다. 개발환경 npm run start public > index.html (메인페이지) ..