목차
React를 배워야 하는 이유
1. 가장 많은 사용자 수
2. 하나를 배우면 웹, 안드로이드, IOS, 데스크톱을 동시에
React 컴포넌트
클래스형 컴포넌트 vs 함수형 컴포넌트
React-Hooks
state,setState,useState
1. useState로 State변수 만들고 바꾸기
2. 리액트에서 let을 안쓰고 state 를 변수로 쓰는 이유
3. 서버 컴퓨터에 전송하기 위해 state에 담아두기
4. 작성한 내용을 검증하고 잘못된 부분을 빨간색으로 표기
React디버깅 툴
자주 쓰는 git 명령어 모음
| 명령어 | 기능 |
|---|---|
| git init | git 하위 디렉토리 생성 (폴더를 만든 후, 그 안에서 명령 실행 → 새로운 git 저장소 생성) |
| git clone [저장소 경로] | 기존 소스 코드 다운로드/복제 |
| git add <파일명> | |
| git add . or * | 커밋에 단일 파일의 변경 사항 포함 |
| 커밋에 모든 파일의 변경 사항 포함 | |
| git commit -m “커밋 메세지” | 커밋 생성 (실제 변경사항 확정) |
| git status | 파일 상태 확인 |
| git branch | 브랜치 목록 확인 |
| git branch -b [브랜치 이름] | 브랜치 생성→ 이동 |
| git checkout [브랜치 이름] | 브랜치 이동 |
| git branch -d [브랜치 이름] | 브랜치 삭제 |
| git push [로컬저장소 이름][브랜치 이름] | 로컬 저장소의 내용에서 생성된 브랜치로 커밋된 내용을 원격 서버에 업로드 |
| git pull [로컬저장소 이름][브랜치 이름] | 원격에 저장된 git 프로젝트의 현재 상태를 다운받고 현재 위치한 브랜치로 병합 |
| git log | 현재 위치한 브랜치 커밋 내용 확인 및 식별자 부여 |
| git fetch origin | 원격에 저장된 git프로젝트의 현 상태를 다운로드 |
| git stash | 아직 마무리하지 않은 작업을 스택에 잠시 저장 |
| git stash pop | 스택에 잠시 저장된 마무리되지 않은 작업을 꺼내옴 |
ctrl + command + 클릭 단축키 : 태그 어디 있는지 찾기
ctrl + -p : 기존에 있었던 커서 위치로 돌아가기
ctrl + shift + - : 또 다시 돌아가기
React에서 사용하는 자바스크립트 변수
리액트와 컴포넌트(구성품, 부품; UI또는 기능을 부품화해서 재사용 가능하게 하는 것)
Vue, Angular? 부품 조립 방식(프론트엔드 3대장)
Why React? 기존에는 페이지를 각각 만듦, 리액트에서는 부품을 만들어서 조립함. -> 큰 서비스를 만들 때 유리하다.
전세계적으로 대다수가 사용 -> 질문,검색 쉬움 -> 취업&이직 쉬움
React 도 Javascript의 기능중 하나일 뿐.
React의 호환성. React.js, React-native, React-Electron
페이지컴포넌트 : 페이지 하나를 컴포넌트(페이지function)
function -> 함수형 컴포넌트
컴포넌트 만드는 방법 2가지
1. 클래스로 만드는 방법j
import{component} from "react" ;
class New extends Component {
render(){
return
}
}
export default New
2. 함수로 만드는 방법
function New(){
return
}
export default New
const New = () =>
export default New
클래스형을 왜 알아야할까?
1. 클래스형으로 만들어 놓고 그대로 유지하는 경우
2. 클래스형으로 만들었지만, 부분부분 함수형으로 변경하는 경우
3. 내가 검색한 코드가 클래스형인 경우
함수형이 가능해진 이유 : use로시작하는애들 (Hooks)이 생김
React에서 사용하는 변수
let const var (x)
state(O)
Hooks - useState, useEffect ...
useState : state(리액트 변수)만들어주는애
state? 컴포넌트 전용 변수
let const 로 만들 수도 있지만 더 업그레이드 된거임.State
어떤 업그레이드?
-
변수 만드는 방법
let count = 0 const count = 0
const[count, SetCount] = useState(0)
const 없어도 되는데 관례상 있음
setCount, [], useState?
[] 원리 - 구조분해할당
useState - 훅(페북에서 만든 기능)
setCount - 변수 바꾸기(변수 바꿔주는 함수)
0 - default 값
-
변수 바꾸는 방법
let count = 0, count = 5
const [ count, setCount ] = useState(0)
setCount(5)
state만 이해하면 document.getElementByID() 안써도됨
코드 전체적으로는 훨씬 더 깔끔해짐
const[ count, setCount ]= useState(0)
let 은 리액트 전용 문서에서 변경을 감지하지 못한다.event 핸들러 함수
알고리즘
-
배열 = [ 1, 2, 3]
Array.push() 배열 맨 뒤에 데이터 추가
Array.unshift() 배열 맨 앞에 데이터 추가Array.pop()
Array.shift() 배열 맨 앞의 데이터 삭제Array.indexOf() 데이터의 인덱스값 반환
-1 ; 존재하지 않을 경우의 리턴값
Array.includes() 데이터의 존재 여부 반환(Boolean) -
객체 = { 'key' : 'value', 'key2':'value2', ... }
객체의 데이터를 조회할 때는 객체의 Key 값을 이용해 조회
객체.key, 객체.key.key(밸류가 객체일때 그 객체의 키:밸류)
obj["name"]
.을 사용 -> 키가 실제로 존재함을 알 때
[] 사용 -> 존재할수도 있으나 없을 수도 있을 때 or 데이터 많을 때 여러 데이터 중에 하나만 뽑고 싶을 때
obj.key = value -> 객체 데이터 추가/변경
delete obj.key -> 객체 데이터 삭제 => 실무사용거의X
