React에 필요한 Javascript
함수
함수 컴포넌트에 유용한 형태
fucntion DoSomething () {
}위 함수를 화살표 함수로 똑같이 나타내면
const DoSomething = () => {
}형태로 쓸 수 있다. 지금 보기에는 그냥 몇 가지 요소를 더 써서 오히려 귀찮은 것 같지만, 나중에 callback function을 많이 쓸 때는 이 형태가 더 편하다고 하니 기억해두자.
그리고 이 경우 export 하는 모양이 조금 다른데, 화살표함수는 export default 라고 쓰지 않고 그냥 export만 앞에 붙여줘도 된다고 한다.
리액트 프로그래밍은 컴포넌트의 조합인데, 컴포넌트가 함수로 이루어지기 때문에 리액트에서 함수는 정말 중요하다.
const Myfunction = (props) => {
return <div>something html</div>
}위의 모양이 함수 컴포넌트의 기본이 되는 형태라고 볼 수 있다.
익명함수
버튼이 있다고 생각해보자. 보통은 onClick 뒤에 함수 이름을 넣어서 버튼을 작동하도록 만든다.
그러나 인라인 함수로 onClick에 대해서 직접 선언해서 사용하는 방법을 쓸 수 있다.
<button onClick={
{console.log("Hello")} }>
</button>그리고 차라리 이 방법이 나을 때도 있다. 따로 함수를 선언하지 않고 바로 만들어 쓸 수 있기 때문이다.
삼항연산자 (tenary operator)
삼항연산자, tenary operator는 코드가 너무 길게 늘어나지 않고 간결해질 수 있도록 도와준다.
let age = 10;
let name = "Pedro";
if (age>10){
name = "Jack";
}else{
name = "Pedro";
}
위와 같은 코드가 있다고 하자. 우리는 지금 나이에 따라 이름을 달리 하는 코드에 벌써 6줄을 소비했다. 이 코드를 더 간결하게 쓰고싶으면 어떻게 하면 될까?
위에서 이름이 Pedro가 되게 하는 코드가 반복되니, 아예 변수 선언 단계에서 이 사람이 10살 이상이면 이름이 Pedro라고 선언되도록 해보자.
let age = 16;
let name = age > 10 && "Pedro";
//name을 Pedro라고 한다 (만약 age>10가 true인 경우)if-else문의 경우 아래와 같이 나타낼 수 있다.
let age = 16;
let name = age > 10 ? "Pedro" : "Jack" ;
//name에 대해(만약 age>10가 true인 경우 Pedro, 아니면 Jack.)? 앞의 조건이 참이면 첫 번째, :가 else처럼 쓰여서 아닐 경우 : 뒤의 값으로 정해진다고 생각하면 된다.
실제 리액트에서는 어떻게 사용될까?
const Component = () => {
return age>10 ? <div> Pedro </div> : <div> Jack </div>
}위와 같이 작성하면 조건에 따라서 다른 ui를 리턴해서 사용자에게 컴포넌트를 보여줄 수 있다. 아주 유용하다!
객체
객체 기본
const person = {
nname: name,
age: 20,
isMarried: false,
}이렇게 객체를 생성하면 아래와 같은 방법으로 person 객체 내부에 있는 특정한 값을 가져다 쓸 수 있다.
const name = person.name;
const age = person.age;
const isMarried = person.isMarried;그런데 저 값들을 일일히 대응시켜주지 않아도 세 값을 객체에서 가져와서 쓰는 방법이 있다.
const {name, age, isMarried} = person;이렇게 하면
const name = "Pedro";
const person = {
name: name,
age: 20,
isMarried: false,
}또한 위와 같은 방법으로 person 객체가 위에 있는 name변수의 값을 person 안의 name 값으로 쓸 수 있다.
만약 key value가 위에서 선언한 변수와 같은 이름을 가지고 있고, 그 값을 가져다 쓰고 싶다면
const name = "Pedro";
const age = 20;
const person = {
name,
age,
isMarried: false,
}이렇게 이름만 써주어도 된다.
Spread Operator
그러면 만약 내가 person2라는 객체를 만드는데, 다른 값은 다 똑같지만 이름만 바꾸어서 만들고 싶다면 어떻게 하면 좋을까? 객체를 복제하면서 딱 이름만 바꾸려면 어떻게 하면 좋을까?
const person = {
nname: name,
age: 20,
isMarried: false,
}
const person2 = {...person}위의 ... 표현은 spread operator로, 'everything'이라는 의미이다.
여기에 ... 뒤에 person이 있으니, person 객체의 모든 것을 가져온다는 뜻이다.
const person2 = {...person, name: "Jack"}이 떄 코드 뒤에 , 하고 변수명을 붙여주면 'everything but'이라는 의미가 된다.
따라서 person의 모든 속성을 복사하면서, name은 그 대신 Jack으로 바꾼다는 의미이다.
배열 활용
이 방법을 배열에도 적용할 수 있다.
const names = ["Pedro", "Jack", "Jessica"]
const names2 = [...names, "Alley"];만약 이렇게 코드를 작성하면 names 배열을 똑같이 names2로 가져오되, Alley라는 이름을 하나 더 추가한 배열을(size=4)생성하겠다는 의미이다.
배열에 활용하는 3가지 유용한 함수
.map()
let names = ["Pedro", "Jack", "Jessica"]위와 같은 이름의 배열이 있다. 그런데 내가 갑자기 각 이름 뒤에 숫자1을 각각 붙여서 출력하고 싶다.
물론 배열 원본에 1을 추가해서 출력해도 되지만, map 함수를 사용하는 방법도 있다.
map 함수는 인자를 필요로 하는데, map 함수 안의 ()에는 적용할 함수를 적어줄 수 있고, 당연히 익명함수도 가능하다.
names.map((name) => {
console.log(name)
})이렇게 함수를 작성하면 names의 각각의 이름을 출력해줄 것이다.
이 때 map 안의 익명함수가 가지는 인자는 임의로 지정될 수 있다. (꼭 name이 아니어도 상관 없다는 뜻.)
만약 map 함수가 출력문이 아니라 return값을 가지면 어떨까?
names.map((name) => {
return name + "1";
})이렇게 되면 함수는 name에 1을 붙인 string을 리턴해서 names 배열을 변경할 것이다.
리액트에서는 return을 html 태그로 하면 UI를 변화시킬 수 있다.
names.map((name) => {
return <h1>{name}</h1>
}).filter()
let names = ["Pedro", "Jack", "Jessica", "Pedro", "Pedro"];우리가 배열에 Pedro를 많이 가지고 있는데, Pedro라는 이름을 걸러내고 싶다고 생각해보자.
이 경우 filter 함수를 사용할 수 있다.
names.filter((name)=>{
return name !== "Pedro";
//조건 설정
})이렇게 filter 함수는 리스트를 이용한 검색이나 필터링에 아주 유용하게 사용될 수 있다.
.reduce()
Async, Await, Fetch
웹 개발에서 API를 사용하려면 Async, Await, Fetch가 꼭 필요하다.
데이터를 요청하고 받아서 다루려면 알아야 하는 개념들이다.
