Lennon FE

리액트를 사용해 코드를 작성하다보면 서버통신 및 컴포넌트 라이프 사이클 차이에 따라 null, undefined를 반환해 가끔 오류가 발생하곤 한다. 이는 그래도 친절하게 오류 코드로 알려주기에 해결하긴 쉬울 수 있지만, 존재 또는 존재하지 않는 요소와 메서드들에 대해 안전하게 접근할 수 있도록 도와주는 옵셔널 체이닝 연산자를 통해 더 쉽게 해결할 수 있다. 아래 코드에서 span안의 text값이 몇이 나올지 예상해보자. import React from 'react' const getNonEmptyCategories = (catrgories) => ( categories.filter((category) => category.items > 0); ) // categories = [ {items: 5, id..

Array를 순회하는 방법엔 여러가지 방법이 있다. 고전적이라면 const arr = [1,2,3,4,5] for(let i = 0; i { console.log(v); }) forEach를 사용할 것이다. 또는, 이터러블, 이터레이터의 개념을 알거나, 뭔가 이렇게 쓰는 게 좋다고 들으셨다면 const arr = [1,2,3,4,5] for(const a of arr) { console.log(a); } for of..

고차함수는 함수를 값으로 다루는 함수이다. 함수를 인자로 받아서 실행하는 함수들을 살펴보자. const funcAdd = f => f(1); const add10 = a => a + 10; console.log(funcAdd(add10)); 위 funcAdd 함수는 console.log에서 인자로 add10함수를 받는다. 당연하게 결과는 11로 예상할 수 있다. 함수를 만들어 리턴하는 경우도 있다. 이런 경우를 클로저를 만들어 리턴하는 함수라고 말한다. 함수가 함수를 만들어서 리턴할때는 결국은 클로저를 만들어서 리턴하기 위해 사용한다. 아래 예시를 확인해보자, 우리가 써보지 못한 느낌의 arrow Func 로 적혀있다. const add = a => b => a + b; const add10 = add(..

react, javascript에서는 보통 sort를 이용해 정렬을 많이한다. 그러나 sort를 사용하면 모두가 알다시피 코드 가독성이 많이 떨어질 수 밖에 없다. 또한 sort는 이상한 문제점이 있다. const arr = [1,3,20,5]; const sortedArr = arr.sort(); console.log(sortedArr) // [1,20,3,5] sort를 그냥 사용하면 위처럼 우리가 예상한대로 동작하지 않는다...(자바스크립트... ㅠ.ㅠ🥲) 그로인해 자바스크립트를 사용하는 개발자라면 보통 기본 sort를 바로 사용하지 않고 (a,b) 두 인자를 비교하는 함수를 만들어 sort를 사용한다. const arr = [1,3,20,5]; const sortedArr = arr.sort((a..

다들 리액트 프로젝트에서 useState를 쓰며 당황했던 적이 있을거라 생각한다. 리액트의 useState를 쓰다보면 우리가 원하는 대로 동작하지 않는 걸 확인할 수 있다. 아래 코드는 체크박스가 하나 존재하고 체크할때마다 상태 toggle 값이 true or false를 가지는 로직이다. 체크박스를 체크하는 걸로 상태값을 바꾸는 예시를 보고 결과를 예상해보자 import React, { useState } from "react"; function App() { const [toggle, setToggle] = useState(false); const onChange = () => { setToggle((toggle) => !toggle); if(toggle) { console.log('toggle은 T..