본문 바로가기

분류 전체보기104

React useState를 이용한 Counter만들기 21.02.05 1. useState란 1-1. 설명 사용자에게 보여주는 컴포넌트가 동적으로 사용자 인터랙션에 따라 바뀌어야 할 때 사용한다. 컴포넌트에서 상태를 관리 할 수 있게 해준다. * 컴포넌트에서는 동적인 값을 state라고 한다 * 1-2. 사용 useState를 호출할 때는 상태의 현재값을 넣는다. useState의 반환값은 배열이며 첫 번째 원소는 현재상태, 두 번째 원소는 setter함수이다. 2. counter기본 Counter.js (src아래에 추가) import React from 'react'; function Counter() { const onIncrease = function() { console.log('+1'); }; const onDecrease = () => { co.. 2021. 2. 5.
JavaScript 단축 평가 논리 계산법, 비구조화 할당 21.02.04(+21.02.05) 1. 단축 평가 (short-circuit evaluation) 논리 계산법 논리 연산자를 조금 더 유용하게 사용하는 방법이다. 논리 연산자를 사용할 때, 우리는 꼭 boolean값만 사용 할 수 있는 것은 아니다. 예시. const student = { name : "빠니몽" }; function returnName(person) { if(person) return person.name; else return undefined; } console.log(returnName(student)); 위의 문장을 더 간단하게 줄일 수 있다. const student = { name : "빠니몽" }; function returnName(person) { return perso.. 2021. 2. 5.
React props, 조건부렌더링 21.02.04 1. props props는 propertyies를 뜻한다. JS에서 변수를 넘겨받고싶을 때 사용한다. 1-1. 기본 사용법 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js import React from 'react'; function Hello(props) { return 안녕하세요 {props.name} } export default Hello; 1-2. default props props의 default를 설정할 수 있다. App.js import Hello from "./Hello"; import React f.. 2021. 2. 4.
Git/github remote, branch, commit취소 21.02.04 1. remote repository 생성과 연결 remote repository는 원격 저장소를 뜻한다. working area, staging area, history는 컴퓨터에 종속적이다. 커밋 내역들을 인터넷에 백업/협업/오픈소스화를 목적으로 올리기 위한 장소이다. remote repository는 github홈페이지로 들어가서 새로 만들 수 있다. 1-1. remote와 local repo 연결하기 git remote add [remote별칭] [remote https 주소] * remote별칭이란 : 하나의 로컬 repo에 여러개의 remote를 연결할 수 있으므로 별칭이 필요하다. 기본값은 origin이다. ex) git remote add origin https://www... 2021. 2. 4.
Git/github 기초, init, log, status, add, commit, show, diff 21.02.03(21.02.04) 1. 깃이란 vcs(version control system, 버전 관리 시스템)이다. 버전 관리는 기록, 추적, 보관, 복원으로 구성된다. 깃의 저장소는 working tree, staging area(index), history로 구성되어있다. * 저장소 구성 working tree : 작업들의 변경사항을 추적한다. staging area : 작업이 완료된 파일들을 올려놓는 공간 history : 실질적 저장소 2. 깃 명령어 git init : 깃을 생성하는 명령어. working tree, staging area, history가 모두 생성된다. git add 파일명 : working tree에 있는 파일을 ataging area에 올리는 명령어 git statu.. 2021. 2. 4.
React 시작하기, JSX, JSX기본규칙 21.02.03 1. 환경 설치 Node.js설치, Yarn 설치(선택사항, npm 사용 가능) 터미널로 react폴더를 만들 폴더로 들어가서 'npx create-react-app 생성할react폴더이름' 입력 폴더가 만들어지면 그 폴더로 들어가서 터미널창에 yarn start or npm start 입력 2. 컴포넌트 만들기 리액트에서 컴포넌트는 클래스 또는 함수의 형태로 만들 수 있다. src아래에 파일을 만든다. 리액트 컴포넌트를 만들 때는 import React from 'react';를 꼭 써주어야 한다. 최하단에 export default 함수명or클래스명; 을 써주면 컴포넨트를 내보낼 수 있고 다른 컴포넌트에서 사용할 수 있다. * 리액트에서는 xml형태의 값을 반환할 수 있다. 이것을 J.. 2021. 2. 3.

티스토리툴바