React를 시작하기전에 ES6 문법에 대해 공부를 해야하는데, React에서 많이 사용하는만큼 아래의 5가지 목차정도는 충분히 숙지하고 React를 시작하는게 좋다.
- 화살표 함수
- 객체와 배열 구조분해 할당
- 함수 인자에서 구조분해 할당
- Spread Operator(전개 구문)
- Rest Operator(나머지 매개변수 구문)
- map, filter 메소드
💡 JS함수 / 화살표 함수
자바스크립트에서 기본적으로 함수를 만드는 방법은 2가지가 있다.
function 키워드 를 사용하는방식, Arrow function 을 사용하는 방식
하지만 React에서는 두 방식에 큰차이는 없다.
그러므로 본인이 편한 식으로 하면 된다.
기본적인 방법으로 function 키워드를 사용해 함수를 정의합니다.
// Function keyword (함수 선언식)
function sayHello () {
return "hello world!"
}
//Function keyword (함수 표현식)
const sayHellow = function(){
return "hello world"
}작동 방식에 있어서 두 방식에 차이는 없지만
함수 선언식은 호이스팅 에 영향을 받고, 함수 표현식은 호이스팅 에 영향을 받지 않는다.
기본적인 JS함수에 대해서 잠깐 살펴봤고,
이제는 화살표 함수에 대한 설명이다.
화살표함수
- 함수표현식보다 단순하고 간결하다.
- 익명함수와 암시적 반환을 가능하게 해주기 때문에 앞으로 굉장히 많이 사용하게 될 것이다.
- Arrow function 방식 1
const sayHello = () => { // < --- 함수 로직 --- > return "hello world!" } - Arrow function 방식 2 (암시적 반환)
// return 을 생략하는 방식. const sayHello = () => "hello world!" - Arrow function 방식 - 익명함수
이름을 가진 함수는 해당 변수명을 호출해 몇번이든 재사용 할 수있는 장점이 있지만, 간단한 함수를 일회성으로 사용할때 화살표함수에 익명함수를 사용할수가 있다.
// 예시 1 - 기본적인 함수 표현 방식
const sayHelloOnClick = () => {
console.log('hello friend')
}
<App onClick={sayHelloOnClick} />
// ❗️ 예시 1 - 익명 함수
<App onClick={() => console.log('hello friend')} />
// 예시 2 - 기본적인 함수 표현 방식
const ReturnItem = (item) => {
return <div>{item}</div>
}
{array.map(ReturnItem)}
// ❗️ 예시 2 - 익명 함수
{array.map((item)=> <div>{item}</div>))}💡 구조분해 할당
객체나 배열을 구조분해하여 나타낼 수 있다.
//객체
//구조분해 할당을 사용하지 않을 때
const user = {name: "홍길동", age: 30};
console.log(user.name) // 홍길동
console.log(user.age) // 30
//구조분해 할당을 사용했을 때
const { name, age } = user
console.log(name) // 홍길동
console.log(age) // 30
//배열
//구조분해 할당을 사용하지 않을 때
const games = ['배틀그라운드', '리그오브레전드'];
console.log(game[0]) // 배틀그라운드
console.log(game[1]) // 리그오브레전드
//구조분해 할당을 사용했을 때
const [battleGround, Lol] = games;
console.log(battleGround); // 배틀그라운드
console.log(Lol); // 리그오브레전드
//함수
//함수의 인자가 배열/객체일 경우 위와 동일한 방법으로 구조분해할당이 가능하다.
//구조분해 할당을 사용하지 않을 때
//user가 객체일 때
const getUserName = (user) => {
return user.name
}
//user가 배열일 때
const getUserName = (user) => {
return user[0]
}
//구조분해 할당을 사용했을 때
//객체일 때
const getUserName = ({name, age}) => {
return name;
};
//배열일 때
const getUserName = ([name, age]) => {
return name
};💡 Spread Operator (전개 구문)
-
기존에 있는 객체나 배열의 내용을 그대로 가져오거나 새로운값을 덧붙여서 새로운 객체나 배열을 생성할수있다.
-
기존의 데이터에는 전혀 영향을 주지않고 복사해서 새로운것을 만든다.
const box = {size : "big", color: "red"}
const newBox = {...box}; // {size : "big", color: "red"}
const newBlueBox = {...box, color: "blue"} // {size : "big", color: "blue"}💡 Rest Operator (나머지 매개변수 구문)
-
rest문법은 spread와 비슷해 보이지만 조금은 다른 기능을한다.
-
객체나 배열에서 구조분해할당을 했을 때, 나머지 정보를 묶어서 표현할 수 있다.
const user ={id: 1, name: "둘리", age: 10, location: "seoul"};
// rest 사용
const {name, ...rest} = user;
// 콘솔에 rest를 찍어보면, 구조분해 할당을 한 정보를 제외한 나머지 값을 보여줍니다.
console.log(rest) // {id: 1, age: 10, location: "seoul"}💡 React 자주쓰는 메소드
- map
- 배열 내 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
const array1 = [1,4,9,16]
const map1 = array1.map(x => x*2);
console.log(map1) // [2,8,18,32]- filter
- 주어진 함수의 테스트를 통과하는 모든요소를 모아 새로운 배열로 반환
const fruits = ['사과','귤','배','감','바나나','키위']
const result = fruits.filter(fruit => fruit.length > 2)
console.log(result) // ['바나나']💡 React 페이지 실행 시켜보기!
React를 실행시키기전에 Node.js를 먼저 설치해야한다.
Node.js 다운로드!
이전에 React를 한번 배운적이 있었는데, 그때는 npm으로 명령어를 했지만 이번에는 yarn으로 사용하기로 했습니다.
npm이란 무수히 많은 third-party 패키지들이 모여있는 집합소이다. npm에서 여러 패키지를 다운받아 활용할 수 있다.
비슷하게는 yarn이라는 것이 있는데, 둘다 패키지 매니저 이지만 yarn이 조금 성능적으로 npm보다 나은면이 있어서 yarn으로 사용한다.
yarn 설치명령어
npm install -g yarn
버전확인
yarn -v
패키지설치법
yarn add [패키지명]다 설치가 되었으면 이제
CRA를 해줘야한다.
CRA ( Create-react-app )
- React 프로젝트를 하기위해 필요한 여러프로그램을 자동으로 설치해주는 도구
- vscode 터미널에서 프로젝트 생성할 폴더를 열어서 터미널에 아래와같이 입력하면 설치가 된다.
yarn create react-app 프로젝트명(폴더명)폴더의 구조를 보면
위와같이 되어있는데 src에 있는 부분들을 많이 건들예정이니 폴더의 구조를 잘 숙지해놓으면 좋다.
위처럼 설치가 되었으면, 터미널에
cd 프로젝트명(폴더명)
yarn start라고 명령어를 입력하면 페이지가 실행되는 걸 볼 수 있다.
