전체 글
-
[VSCODE] react native, node.js 실행 / 실행 오류 해결개발 프로젝트: 핀더펜 2022. 2. 10. 01:30
지난 포스팅에서 clone한 프로젝트를 실행해보겠습니다. react native 실행 터미널 창을 열고 client 폴더에 접근해서 npm start로 react native를 실행합니다. 그런데.... 위와 같은 오류가 생겼습니다...ㅜ 그래서 구글에 찾아보니 npm 폴더의 위치를 찾아서 환경변수에 등록하라고 해서 그대로 해봤습니다. cmd에서 npm -g root 로 npm 폴더의 위치를 찾습니다. 그리고 환경변수 설정에서 path에 C:\Users\[사용자명]\AppData\npm을 추가해줍니다. 그런데도 동일한 오류가 발생했습니다.... 그래서 프로젝트 폴더를 확인해봤더니 expo-shared는 있는데 expo는 없더라구요... 그래서 expo를 추가해줬습니다. 그런데도 다음과 같은 오류 발생....
-
리액트 주요개념 - React로 사고하기IT/리액트 2022. 1. 16. 23:54
React는 JavaScript로 규모가 크로 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. 이번 글에서는 React로 상품을 검색할 수 있는 데이터 테이블을 만드는 과정을 살펴볼 것입니다. 목업으로 시작하기 애플리케이션을 설계하기 전 디자이너로부터 JSON API와 목업을 받습니다. // JSON API [ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: false,..
-
리액트 주요개념 - 합성 vs 상속IT/리액트 2022. 1. 16. 20:34
React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 많습니다. 특히 범용적인 박스 역할을 하는 Sidebar 또는 Dialog와 같은 컴포넌트에서 흔히 볼 수 있습니다. 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력하여 그대로 전달하는 것이 좋습니다. function FancyBorder(props) { return ( {props.children} ) } 이러한 방식으로 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있습니다. function WelcomeDialog(..
-
리액트 주요개념 - State 끌어올리기IT/리액트 2022. 1. 16. 19:28
동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때가 온다면 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 예제: 주어진 온도에서 물의 끊는 여부를 추정하는 온도 계산기 BoilingVerdict: 섭씨온도를 의미하는 celsius prop를 받아 물이 끓기에 충분한 온도인지에 대한 여부를 출력 function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil. } Calculator: 온도를 입력할 수 있는 을 렌더링하고 그 값을 this.state.temperature에 저장, 현재 입력값에 대한 BoilingVe..
-
리액트 주요개념 - 폼IT/리액트 2022. 1. 16. 01:32
제어 컴포넌트 (Controlled Component) JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근 할 수 있도록 도와주는 기술 HTML에서 폼 엘리먼트(input, select, textarea, ..)는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. 그러나 React에서는 변경할 수 있는 state가 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 이때 React state를 신뢰가능한 단일 출처(single source of truth)로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어할 수 있고 이러한 방식으로 React에..
-
리액트 주요개념 - 리스트와 keyIT/리액트 2022. 1. 16. 01:22
여러개의 컴포넌트 렌더링하기 엘리먼트 모음을 만들고 중괄호를 이용해 JSX에 포함시킬 수 있습니다. const numbers = [1,2,3,4,5]; const listItems = numbers.map((number) => {number} ); map() 함수를 사용해 numbers 배열을 반복 실행하면서 각 항목을 엘리먼트로 반환하고 listItem에 저장합니다. function ListAndKey() { return ( {listItems} ) } listItem 배열을 엘리먼트 안에 포함하여 반환합니다. (저는 새로운 .js 파일을 생성하고 index.js 에서 호출하는 방식으로 코드를 작성했습니다.) 기본 리스트 컴포넌트 일반적으로 리스트 렌더링은 컴포넌트 안에서 이루어집니다. 위의 코드를 리..
-
리액트 주요개념 - 조건부 렌더링IT/리액트 2022. 1. 16. 00:31
React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들고 애플리케이션의 상태에 따라 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. 이때 if나 조건부 연산자와 같은 JavaScript 연산자를 사용합니다. 예를 들어 로그인 상태에 맞게 다른 문구를 보여줘야 한다면 다음과 같이 코드를 작성해야 합니다. //ConditionalRendering.js function UserGreeting(props) { return WelcomeBack!; } function GuestGreeting(props) { return Please sign up; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if(isLoggedIn) { return ; }..