공부 정리/웹(Web)39 react key prop 글 작성 동기? react key prop의 필요성에 대해서 정리하고 싶어서 글을 작성하였습니다. key props 왜 필요한가? key props를 사용하지 않는다면 1 2 해당 코드가 1 2 3 로 업데이트 될 때, react 내부에서는 1와 1가 일치하는지 확인하고 2와 2가 일치하는지 확인하고 마침내 3는 한곳에만 있음을 발견하고 추가해 줍니다. 그런데 만약 1 2 3 1 2 이러한 변경이 일어 났을 때, react는 3를 단순히 추가하지않고, 1를 3로 변경하고 2를 1로 변경하는 비효울적인 연산을 하게 됩니다. 이러한 비효율을 방지하기 위해서 ... key props를 쓰게 됩니다. key를 사용하면 key를 통해 트리를 비교하기 때문에 3가 새로운 노드란 것을 알 수 있게 됩니다. => 사실.. 2022. 12. 29. sequelize 복수형 테이블 이름 sequelize에서 테이블을 생성하면 테이블명이 자동으로 복수로 바뀌는 시스템이 있었습니다. user - > users animal -> animals person -> people 뭔가 세심한 배려인듯... 이러한 배려를 받고 싶지 않다면 freezeTableName 속성 활용하기 ! sequelize.define('User', { //속성 정의 }, { freezeTableName: true }) 그냥 테이블 이름 강제로 설정하기 ! sequelize.define('User',{ //속성 },{ tableName: 'User' }); 2022. 12. 24. React 클래스형 컴포넌트 vs 함수 컴포넌트 소개 react 클래스형 컴포넌트와 함수 컴포넌트의 차이점을 알아봅시다. 현재 react 공식문서는 새로운 프로젝트의 경우 함수 컴포넌트 사용할 것을 권장하고 있습니다. why react 개발팀은 왜 클래스형 컴포넌트를 놔두고 함수 컴포넌트를 개발했을까요? 1. 로직을 재사용하기 힘들었다. 두 컴포넌트의 로직이 비슷할 때, 하나의 더 높은 차원의 컴포넌트를 생성하여 나머지 컴포넌트를 감싸주는 식으로 구현하였습니다. 이러다 보니 점점 감싸주는 컴포넌트의 개수가 많아졌고, wrapper hell에 빠지기도 하였습니다. => 현재는 커스텀 훅을 이용해서 로직을 재사용 합니다. 2. 복잡해진 컴포넌트는 이해하기가 어려웠다. 클래스형 컴포넌트의 경우 라이프 사이클을 이용하는 메서드가 있었습니다. (componen.. 2022. 12. 23. [javascript] string.charAt(i) vs string[i] 비교 학습 이유 문자열을 인덱스로 접근할 때 두 방법에 차이가 있었다. 학습 내용 "abc".charAt(0) ==> a "abc".charAt('dsafdsfasdf') ==> a "abc"[0] ==> a "abc"['asdfadsfa'] ==> undefined "abc".charAt(5) ==> "" "abc"[5] ==> undefined 한 줄 정리 charAt()은 범위 밖에 벗어난 인덱스를 찾을 경우, 공백 출력(숫자 말고 다른 걸 입력하면 그냥 첫 글자를 출력함) [index] 방식은 undefined 출력 참고 : https://thisthat.dev/string-char-at-vs-string-bracket-notation/ 2022. 9. 8. [javascript] forEach vs map Array.forEach() vs Array.map() 최근에 forEach, map과 관련하여 피드백을 받았다. 일단 두 메서드의 가장 큰 차이점은, map - 새로운 배열을 리턴함 forEach - 새로운 배열을 리턴하진 않음 예를들면, forEach는 배열을 출력하고 싶을 때 처럼 새로운 배열을 리턴할 필요가 없을 때 사용된다. 하지만 ? Array.map도 배열을 출력하는데 사용될 수 있다. 결국 forEach와 map은 똑같은 결과물을 만들어낼 수도 있지만, 구분해서 쓰는 이유가 있다. 해당 코드를 유지보수 할 때 이 코드가 유용한 것을 리턴하냐? 안하냐 이 점을 확실하게 알 수 있다. 2줄정리 forEach -> 새로운 배열 리턴안함, side-effect용 map -> 새로운 배열 리턴함 2022. 8. 22. [regex] 정규표현식 공부이유? 은근히 자주 쓰이는데 매번 얕게 공부해서 까먹는 경우가 많았음. 이번기회에 확실히 정리하였다. 일단 자바스크립트 기준으로 공부하였다 먼저 regex는 / / 안에 작성을 함. 1.기본 abc 라는 문자를 찾고싶으면 그대로 /abc/라고 작성하면됨. 1.5 기본 2 []는 한 글자를 의미함 [ABC]를 적으면 A B C 를 찾을 수 있음 [^ABC]를 쓰면 ABC외 문자를 찾아냄 대괄호 안 ^는 제외의 의미 2.정량자 ? : 0번이나 1번 나타남 + : 1번이나 무제한 * : 0번이나 무제한 3. 정량자 활용 a로 이루어진 문자를 모두 찾을 때 /[a]+/ 라고 입력하면 aaa aa aa a a a aaa 모두 찾을 수 있음 4.^ & ^는 시작을 의미, &는 끝을 의미함 /^A[B]A&/ 는 .. 2022. 8. 21. 이전 1 2 3 4 5 ··· 7 다음 반응형
