react에서는 각종 컴포넌트를 미리 만들어 놓고 필요에 의해 호출하여 사용한다. 반복되는 컴포넌트는 반복문을 통해 호출하게 되는데 이 때 각 컴포넌트에 `key` 를 지정할 수가 있다. 💡 keykey는 반복문으로 호출되는 컴포넌트에 전달(포함)시키는 값이다. 리스트로 이루어진 컴포넌트 중에서 값의 변화가 이루어지는 컴포넌트를 식별하기 위해서 사용한다.즉, `key`가 없으면 컴포넌트를 순회하여 변화를 감지한 이후에 리렌더링을 하게 되고 성능적으로 좋지 않다.각각의 컴포넌트에 고유한 값을 전달해야 한다. `key`를 직접 명시하지 않으면 자동으로 인덱스를 `key` 로 사용한다.
useState로 값을 업데이트 하는 방식은 일반형과 함수형 두 가지가 있다. 💡 (1) 일반형 업데이트 count 값에 +1 을 더해주는 간단한 예시 코드 const [count, setCount] = useState(0);setCount(count + 1); // 일반형많이 사용되는 방법이고 간결하다. 하지만 하나의 함수에서 여러번의 값이 변경되어야 할 때 문제가 생길 수 있다. 다음 코드를 봅시다. const [count, setCount] = useState(0);/* 어쩌구 저쩌구 코드들 */ { setCount(count + 1); setCount(count + 1); setCount(count + 1); }}>+3버튼을 한 번 클릭할 때마다 `count + 1` 을 ..
💡 useEffect()const [count, setCount] = useState(1);const handleCountUpdate = () => { setCount(count + 1);}const handleInputChange = (e) => { setName(e.target.value);}/* 대충 다른 코드들 */return ( 추가 count: {count} name: {name})`count`와 `name` 값이 이벤트에 따라 handle 함수들에 의해 업데이트되는 저런 코드가 대충 존재함. 저렇게 업데이트 되거나, 마운트(최초 렌더링)되거나, 마운트가 해제되었을 때 실행되는 것이 `useEffect()` 임 사용 예시 (1) - 모든 state의 변경에 대해 실행const ..
💡 지연 초기화기본적으로는 useState에 초기값을 넣어주게 되면 state가 뭐 어떻게 변하건 초기값을 계속 불러오게 된다. 하지만 Lazy initialzation 기법(?) 을 사용하면 처음 렌더링 될 때만 호출(동작)된다. 원래 쓰던 방법const getName = () => { /* 막 api 불러오고 */ /* 막 데이터 가공하고 */ /* 막 데이터 정렬하고 */ /* 기타 무거운 코드들 */ return 전국민이름모음}const [name, setName] = useState(getName());초기값으로 getName()에서 반환된 값을 사용한다. 가벼운 작업이나, 상수값 같은 것들은 그냥 써도 되겠지만 혹시 저렇게 작업량이 많고 무거운 값을 반환받아 사용될 경우 성능적인..
간략한 팀프로젝트 소개tmdb api를 이용하여 다양한 영화 정보를 가져올 수 있다. 가져온 영화 정보를 이용해서 다양한 기능과(검색, 평점, 댓글 등) 디자인 적인 부분까지 신경써서 제작한 프로젝트이다. 이전 리팩토링 과정(1) - [불어나는 API_URL 관리](2) - [중복되는 매개변수 제거](3) - [spread & rest]이번 리팩토링은 firebase 모듈을 `js` 파일 하나하나에서 전부 초기화를 해주고, firebase 전체를 import해서 사용하던 부분을 정리해보았다. firebase 모듈을 초기화하고 import하는 코드만 20~30행 정도를 차지하는데 싹다 밀어버렸다. 💡 기존 구조import { initializeApp } from "https://www.gstatic...
state는 원래값과 변경값이 같으면 변경 액션 자체를 하지 않는다.좀 더 정확하게 말하자면 `값` 을 비교한다기 보다 이전 값과 `메모리 주소` 가 변경되었는지를 판별한다. 💡 원시 데이터 타입 변경 예시그럼 원시 데이터 타입에 대한 state 변경 예시를 알아보도록 합시다. state 정의const [name, setName] = useState("길동")state 변경let copyName = name; // 길동 저장copyName = '이황' // coppyName 변경setName(copyName)`name`을 `copyName`에 복사하고 값을 변경했다. 그리고 `copyName` 으로 변경 코드를 작성할 경우 우리는 당연히 변경된 값을 확인할 수가 있을 것이다. 하지만 동일한 문자..
💡 git, VSCode, Node 설치git - https://git-scm.com/download/winvscode - https://code.visualstudio.com/node - https://nodejs.org/en 위의 사이트에서 다운 받고 설치하면 됨 💡 yarn 설치 (선택사항)node를 설치하면 `npm`이라는 노드의 패키지 관리자도 자동으로 설치가 된다. `yarn`은 기능적으로는 같지만 성능적인 측면에서 `npm` 보다 향상된 패키지 관리자이다. 터미널에서 아래 명령어를 입력하여 설치한다. 정리하자면 안써도 문제 없으니까 귀찮으면 패스해도 된다. 괜히 저 처럼 에러날 수도 있음 일단 설치하기전에 npm과 yarn이 뭘 해주는지부터 알아 보자. 유용한 패키지, 라이브러리 등을 ..
프로젝트를 진행하던 중 고민거리가 하나 생겼다. 바로 모듈화된 자바스크립트 파일끼리의 데이터 공유방법이다. 예시 프로젝트 구조를 살펴보자. // api.jsexport const MAX_VALUE = 10// a.jsimport {MAX_VALUE} from 'api.js'const 갖고싶은변수 = 20;/* 각종 코드 ... */// b.jsimport {MAX_VALUE} from 'api.js'/* 각종 코드 ... */위와 같은 프로젝트가 있다고 가정 했을 때 둘 다 `constant`의 변수에 `import`를 해서 접근 한다. 하지만 어느 날 b에서 a의 변수 딱 하나, 더도 말고 딱 하나 `갖고싶은변수`에 접근이 필요할 경우가 생긴 것이다. 하지만 `type=module` 로 정의된 자바스..
단축평가자바스크립트에서 단축평가란 논리합(`||`) 또는 논리곱(`&&`)을 사용하여 조건식을 판별하는 과정에서 연산을 조기에 종료하는 것이다. 모든 조건을 판별하지 않고 최종 결과가 나오는 경우에 판별을 중단한다. 💡좌변, 우변논리연산자의 단축 평가를 알아 보기 전에 좌변, 우변의 개념부터 알아야 한다. 아주 간단하다. 논리연산자의 왼쪽에 있는 것을 좌변, 오른족에 있는 것을 우변이라고 칭한다. true || console.log('좌변이 false일 때 찍힘')위 예시에서 `true`는 좌변, `console.log()` 는 우변이다. 그럼 본격적으로 각 연산자의 단축평가 방식을 살펴보자.💡 논리합(OR) 단축평가`||` (OR) 연산자는 좌변이 참(truthy)일 경우 전체 표현식의 결과가 참..
혹시 자바스크립트에서 값이 있다, 없다를 구분하려면 `값 === undefind` 이런거 쓰고 있지는 않나 생각을 해보자. 근본적인 방법이지만 타이핑 하기 귀찮고, 괜히 없어보일수도 있다. 그럴 때 `truthy`와 `falsy` 값을 구분하면 훨씬 간결하고 효율적으로 쓸 수 있다. 💡 간결한 조건 처리function func(a) { if (a) { console.log('truthy') } if (!a) { console.log('falsy') }}// falsy 출력func(null);func(undefined);// truthy 출력func('null');func(123);값이 정의되지 않은 변수처리를 할 때 조건문을 `(값 === undefind || 값 === null || 값 ..
restrest문법은 spread문법과 생긴건 똑같다. 기능적으로는 완전히 반대의 역할을 수행한다. spread문법이 배열이나 객체의 요소를 펼쳐서 평탄화를 시켜준다면, rest는 반대로 펼쳐있는 값들을 배열로 묶어준다. 💡 우리가 알고있는 매개변수 받을 때 모습 function normal(a, b, c, d) { console.log(a, b, c, d);}normal(1, 2, 3, '사'); // 1 2 3 사 💡 rest를 사용해서 매개변수 받을 때function rest(...rest) { console.log(rest);}rest(1, 2, 3, '사'); // [ 1, 2, 3, '사' ]배열이 아닌 기본 리터럴을 전달해주었지만 받는 쪽에서 `...`을 붙여서 받게 되면 ..
💡 페이지를 (재)렌더링 하게 되는 경우들1. 첫 리액트 앱이 실행될 때2. 현재 리액트 내부의 어떤 상태(state)가 변경되었을 때컴포넌트 내부 `state`가 변경될 때컴포넌트에 새로운 `props`가 들어올 때부모 컴포넌트가 위와 같은 이유로 렌더링이 될 때 자식 컴포넌트도 줄줄이 렌더링