작심삼일

React에서는 컴포넌트에서 JSX 문법을 사용할 수 있습니다. {}중괄호를 사용해서 자바스크립트에서 사용한 변수, 메서드 같은 것을 자유롭게 사용 가능합니다. 1. 변수 불러오기 태그 요소안에 변수를 사이에 넣을수 있습니다. 소스 코드 // 1. 변수를 불러온다. function JsxComponent(){ const text = "숫자"; const num = 2; return ( JSX 예시 1 : {text} {num} {/* 중괄호를 통해 text, num 불러오기 */} ) } 결과 2. 메서드 불러오기 함수를 {}중괄호로 불러 올 수도 있습니다. 소스 코드 // 2. function을 불러온다. function JsxComponent1(){ const textfunc = function(){..

컴포넌트도 부모 자식 관계처럼 불러와서 사용할 수 있습니다. 사실 상속관계라고 하기엔 좀 너무 간단합니다. 그냥 export 하는 컴포넌트를 import로 불러와서 사용하는 겁니다. 1. 자식 자식이라는 태그를 리턴하는 child.js 파일을 생성합니다. child.js function ChildComponent(){ return 자식 } export default ChildComponent; export에 default를 사용하는 이유는 단일 함수이기 때문입니다. (함수가 여러개일 경우는 사용하지 않도록 합니다.) 2. 부모 부모 컴포넌트에서는 import로 ./child를 불러옵니다. 단일(default)로 export 했기 때문에, ChildCom 이름으로 바꿔서 사용 가능합니다. ParentCom..

0. 컴포넌트 설명 리액트에서 꽃은 컴포넌트 입니다. 컴포넌트를 통해서 동일한 형태를 여러 곳에서 쉽게 불러올 수 있습니다. 컴포넌트는 딱 두가지만 기억하면 됩니다. 1. 함수로 구성 2. UI 를 Return 결국 HTML를 리턴하는 함수라고 볼 수 있습니다. (HTML 태그에서 class를 className으로 사용하는 차이점은 있습니다. ) 컴포넌트 특징 1) 함수 형태 2) HTML 리턴 1. 간단한 컴포넌트 만들기 1) Component.js 파일 생성 src폴더에 Component.js 라는 파일을 만들어 줍니다. 제 블로그 이름을 태그로 출력하는 컴포넌트를 만들겠습니다. Component.js function exFunc() { const blogName = "shoney"; return( ..

1. 컴포넌트 설명 리액트에서 꽃은 컴포넌트 입니다. 컴포넌트를 통해서 동일한 형태를 여러 곳에서 쉽게 불러올 수 있습니다. 컴포넌트는 딱 두가지만 기억하면 됩니다. 1. 함수로 구성 2. UI 를 Return 결국 HTML를 리턴하는 함수라고 볼 수 있습니다. (HTML 태그에서 class를 className으로 사용하는 차이점은 있습니다. ) 2. React 시작의 App.js 를 살펴보자 우리가 리액트를 사용하기 위해서 폴더에 리액터를 지정하게 되면 App.js 파일을 확인 할 수 있습니다. App.js 도 물론 컴포넌트를 만들어 준 하나의 js 파일입니다. App.js import logo from './logo.svg'; import './App.css'; //함수로 선언 function App..

모듈을 불러오는 방식으로 import를 사용할 수 있습니다. 기존에 axios를 태그를 활용해서 라이브러리를 불러온 경험이 있습니다. 하지만 ES6 부터는 import를 사용해서 라이브러리를 불러올 수 있습니다. 1. import React 폴더를 지정해주고 React 환경을 만들면 아래와 같이 index.js 가 import 하는 것을 확인할 수 있다. (React 폴더지정 링크) index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; 여기서 .은 현재 같은 경로에..

React를 설치하기 위해서는 Node.js 설치가 우선적으로 진행 되어야합니다. node.js 설치 방법을 링크를 눌러 다운로드 하신 후 React 설치를 진행해 주세요. (Node.js 설치 방법 알아보는 링크 클릭) 1. React 설치하기 1) VS Code에서 Ctrl + J 를 누르면 Terminal 창이 아래에 나옵니다. 윈도우 : Ctrl + J 맥 OS : Cmd + J 2) 터미널 창에서 "npm install -g create-react-app" 를 입력합니다. (저는 이미 설치가 되어 있어서 업데이트가 진행 됐네요..) 에러 발생한 경우 링크를 눌러주세요. (React 설치 에러 포스팅으로 바로 가기) 2. React 폴더 지정 사용법 1) React를 사용할 폴더 우클릭 후 'Op..

1. For문을 통해 리스트 값 가져오기 우리는 객체리스트를 가져올때 단순 for문을 통해서 아래와 같이 가저온다. ▼로그 결과 map과 foreach문을 사용해서 리스트의 값을 가져올 수 있다. 2. foreach 사용 예제 ▼로그 결과 3. map 사용 예제 map은 foreach 문과 다르게 return 값을 가지고 있다. return 값을 통해서 새로운 result 리스트를 생성하는 것을 아래에서 확인해보자. ▼로그 결과 result를 출력했을때, 객체의 name 만 들어있는 리스트가 있다는 것을 확인 할 수 있다. foreach문은 return 값이 없지만, map은 return값이 필요할때 유용하게 사용 할 수 있다.

1. '+'를 사용한 문자열 2. ` ${}를 사용한 문자열 일반 콤마를 사용하면 안됩니다. 숫자 1 키 왼쪽에 있는 `(벡틱)를 사용해야지 작성 가능합니다. 3. 로그 결과

JSON JSON : JavaScript Object Notation의 약자 JSON은 정보처리기사에서는 키 - 값 쌍이라고 배웠다. 자바 스크립트에서의 객체의 형식과 JSON은 거의 동일합니다. (자바 스크립트 객체 예제 링크) (key 값에 ""따옴표를 꼭 입력해야 하는 차이점은 있습니다.) 자바스크립트와 같이 사용하기에 큰 장점을 가진 데이터 포맷입니다. 자바 스크립트 JSON { "name" : "쇼니", "age" : 30 } { "name" : "shoney", "age" : 30 } 자바 스크립트에서는 key 값에 "(따옴표)가 없어도 됩니다. 하지만, JSON에서는 key에 "(따옴표)가 필수입니다. JSON의 장점은 다른 프로토콜 언어들에 비해 가독성이 높다는 장점이 있습니다. (키와 값..

1. axios 외부 라이브러리 다운로드 script 태그를 사용해서 아래 링크를 src로 연결합니다. 저는 html 헤더 부분에 아래와 같이 axios 라이브러리를 불러오는 스크립트 태그를 작성했습니다. 소스 코드 다음 스크립트에 log로 axios 객체를 확인해봅시다. 로그로 axios 라이브러리가 제대로 받아졌는지 확인 가능합니다. 소스 코드 console.log(axios); 결과 2. 통신 간단 예제 axios는 promise 객체로 비동기로 실행 가능하다. (비동기 promsie 객체에 포스팅으로 바로 가기) 또한 promise 객체는 then, catch를 사용할 수 있다. then : promise 객체가 성공 한 경우, 실행 catch : promise 객체가 실패 한 경우, 에러 코드 ..