React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리다.따라서 JavaScript 언어에 대한 기본적인 이해가 필요하다.React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App.서버 렌더링 Node.j
JavaScript를 확장한 문법이다. JavaScript의 모든 기능이 포함되어 있다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. React는 J
브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다.엘리먼트는 컴포넌트의 구성 요소이다위 함수는 setInterval() 콜백을 이
개념적으로 컴포넌트는 JavaScript 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.컴포넌트 종류로 함수 컴포넌트와 클래스 컴포넌트 두가지가 있다.함수 컴포넌트와 클래스 컴포넌트컴포넌
state
리액트 17부터는 componentWillMount, componentWillUpdate, componentWillReceiveProps 라이프 사이클이 deprecated 된다.컴포넌트가 처음 실행될 때 그것을 Mount라고 표현한다. 컴포넌트가 시작되면 우선 con
이벤트 처리하기 React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. HTML React 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수
React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있다.React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. 이제 사용자의 로그인 상태에 맞게
엘리먼트 모음을 만들고 중괄호 {}를 이용하여 JSX에 포함 시킬 수 있다.아래의 JavaScript map() 함수를 사용하여 numbers 배열을 반복 실행한다. 각 항목에 대해 <li> 엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장한다.
npx create-react-app my-app을 실행하게 되면에러에서 나온 해결방법을 보자. npm uninstall -g create-react-appyarn global remove create-react-app두가지 다 실행해서 해봤지만 같은 에러가 나온다.그
Hook은 React 버전 16.8부터 React 요소로 새로 추가되었다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.useState는 “Hook”에서 처음 배우게 될 함수다. 왜 Hook을
위 코드에서 state는 { count: 0 }이며 사용자가 this.setState()를 호출하는 버튼을 클릭했을 때 state.count를 증가시킨다. React의 함수 컴포넌트는 이렇게 생겼다.또는 이렇게 생겼다.함수 컴포넌트를 state가 없는 컴포넌트로 알고
미들웨어는, 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정합니다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하시면 되겠습니다.리듀서가 액션을 처리하기전에, 미들웨어가 할 수있는 작업들은 여러가지가 있는데요. 단순
실제 프로젝트를 작업 할 때에는, 미들웨어를 직접 만들어서 사용하는 경우는 그렇게 많지 않습니다. 대부분의 경우엔, 다른 프로그래머들이 이미 만들어놓은 미들웨어들을 사용하면 되기 때문이죠. 하지만, 미들웨어가 어떻게 작동하는지 이해를 하려면 직접 만들어봐야합니다.한번
API 연동을 하기 위해서, 우선 프로젝트를 새로 만들어주도록 하겠습니다.$ npx create-react-app api-integrate그리고, API 를 호출하기 위해서 axios 라는 라이브러리를 설치하세요.$ cd api-integrate$ yarn add ax
ihyeogju@ihyeogjuui-MacBookPro visualProjects % cd "/Users/ihyeogju/visualProjects/native2" && npx react-native run-android(node:71864) DEP0040 Deprec