React 배우기 전에 알아야 할 자바스크립트 문법
안녕하세요?
오늘은 ReactJS를 본격적으로 배우기 전에 알아야 할 자바스크립트 문법에 대해 알아보겠습니다.
즉, React에서 가장 많이 쓰이는 자바스크립트 문법이기 때문에 꼭 알아둬야 한다는 얘기죠.
삼항 연산자(The Ternary Operator)
React에서는 컴포넌트 안에서 if else 문을 쓰지 않고 삼항 연산자를 씁니다.
// 기본 문법
condition ? 'True' : 'False';
// 기존 if-else 문
if(condition) {
'True'
}
else {
'False'
}:
React에서는 if-else문을 안 쓰고 삼항 연산자를 쓰니 꼭 사용법을 알아 두셔야 합니다.
그리고 삼항 연산자를 if-else-if-else 같이 중첩으로도 사용할 수 있습니다.
condition ? 'true' : second_condition ? 'second_true' : 'false'
디스트럭쳐링 (Destructuring)
ES6의 기능인 디스트럭쳐링은 React에서 아주 많이 쓰이고, 실제 아주 유용합니다.
// 디스트럭쳐링 사용
const testObject = ['chair', 'phone', 'orange']
const [chair, phone, fruit] = testObject
// 디스트럭쳐링 사용하지 않을 때는
const chair = testObject[0]
const phone = testObject[1]
const fruit = testObject[2]
디스트럭쳐링은 React 컴포넌트의 props 핸들링에 있어 아주 편한 기능입니다.
// 디스트럭쳐링 예제 1
function testComponent({ fruit }) {
return <div>{fruit}</div>
}
// 디스트럭쳐링 예제 2
function testComponent(props) {
const { chair, phone, fruit } = props
return <div>{fruit}</div>
}
// 디스트럭쳐링 없이 사용
function Fruit(props) {
return <div>{props.fruit}</div>
}
위 컴포넌트 예를 보시면 디스트럭쳐링이 얼마나 편한지 알 수 있을 겁니다.
스프레드 연산자(The Spread operator)
스프레드 연산자도 ES6의 주요 기능인데요.
React에서 정말 자주 사용하는 기능이라 꼭 개념을 익혀 두셔야 합니다.
const [users, setUsers] = useState([
{
id: '',
name: '',
age: '',
},
])
setUsers([
...users,
{
id: '5',
name: 'Jung',
age: '34',
},
])
위 코드에서 보시면 setUsers 함수에서 ...users처럼 스프레드 연산자를 썼습니다.
기존 users 정보를 모두 복사하는 아주 편리한 연산자죠.
꼭 배워 두셔야 합니다.
Array methods
자바스크립트에서 가장 많이 쓰이는 데이터 타입은 바로 배열인데요.
특히 React에서는 Array.map 메소드를 가장 많이 씁니다.
그래서 꼭 map 사용법을 익혀두어야 하는데요.
let users = [
{ firstName: 'Susan', lastName: 'Steward', age: 14, hobby: 'Singing' },
{ firstName: 'Daniel', lastName: 'Longbottom', age: 16, hobby: 'Football' },
{ firstName: 'Jacob', lastName: 'Black', age: 15, hobby: 'Singing' },
]
위와 같이 객체의 배열이 있다고 하면 보통 이걸 map을 이용해서 React에 표시합니다.
let singleUser = users.map(user => {
let fullName = user.firstName + ' ' + user.lastName
return `
<h3 class='name'>${fullName}</h3>
<p class="age">${user.age}</p>
`
})
두 번째로 filter 메소드도 많이 쓰이는데요.
let users = [
{ firstName: 'Susan', age: 14 },
{ firstName: 'Daniel', age: 16 },
{ firstName: 'Bruno', age: 56 },
{ firstName: 'Jacob', age: 15 },
{ firstName: 'Sam', age: 64 },
{ firstName: 'Dave', age: 56 },
{ firstName: 'Neils', age: 65 },
]
// 15세 이하
const youngPeople = users.filter(person => {
return person.age <= 15
})
// 50세 이상
const seniorPeople = users.filter(person => person.age >= 50)
console.log(seniorPeople)
console.log(youngPeople)
세 번째로 find 메소드도 종종 쓰입니다.
const Bruno = users.find(person => person.firstName === 'Bruno')
console.log(Bruno)
애로우 함수 (Arrow function)
React에서는 function으로 함수를 정의하는 거보다 애로우 함수로 함수 정의하는 게 많습니다.
왜냐하면 애로우 함수가 좀 더 코드를 간결하게 해 주기 때문입니다.
// Regular Functions
function hello() {
return 'hello'
}
// Arrow Functions
let hello = () => 'hello'
Promises
Promise도 React 코드에서 많이 쓰이는데요.
let promise = new Promise((resolve, reject) => {
const i = 'Promise'
i === 'Promise' ? resolve() : reject()
})
promise
.then(() => {
console.log('Your promise is resolved')
})
.catch(() => {
console.log('Your promise is rejected')
})
특히 promise의 then과 catch를 많이 이용합니다.
Fetch API
React에서 API의 자료를 가지고 올 때 쓰이는 fetch 함수는 정말 중요한데요.
fetch('http://example.com/books.json')
.then(response => response.json());
.then(data => setState(data));
두 번째 보시면 json() 함수로 json 형태로 꼭 변환해야 합니다.
왜냐하면 response는 promise 타입이라 React에서는 데이터로 표현할 수 없기 때문에 json 형식으로 꼭 바꿔줘야 합니다.
async / await
비동기식 함수 작성에 있어 async 와 await가 많이 쓰이는데요.
async function asyncFunction() {
let promise = new Promise(resolve => {
resolve()
})
let response = await promise
return console.log(response)
}
async / await 사용법은 꼭 배워두셔야 합니다.
ES module import export
ES6에서 쓰이는 모듈의 import와 export도 배워 두어야 합니다.
function Component() {
return <div>This is a component</div>
}
export default Component
import Component from './Component'
function App() {
return <Component />
}
지금까지 React를 배우기 전에 알아야 할 자바스크립트 문법에 대해 알아보았는데요.
위에서 설명한 것만 제대로 익혀두시면 React 코드 짜는 데 있어 많은 도움이 될 겁니다.
그럼.