이 글에서는 중요하지만, 그냥 지나치기 쉬운 기능들을 정리해보려한다. 이 글에서 알아볼 것 Fragment Portal 1. Fragment 앞서 우리는 리액트의 기본개념을 알아보면서 JSX 코드에 대해서 살펴보았다. JSX 코드는 자바스크립트 코드와 HTML 코드를 동시에 활용할 수 있다는 점에서 굉장히 자유로운 개념이라 느꼈었다. 하지만, 이런 JSX 코드에도 제한사항이 존재한다. JSX 코드 제한사항 루트 수준의 JSX 요소들이 인접해있으면(래핑되어있지않으면) 에러 발생 즉, 루트 수준의 JSX는 반드시 한개여야한다 왜냐하면, 이를 반환하거나, 변수등에 저장하기 위한 제약조건이다. 이렇게 글로만 보면 어렵게 보이거나, 잘 와닫지 않지만 자바스크립트를 생각해보면 쉽게 이해가 간다. 자바스크립에서 re..
앞선 글에서 내가 생각하기에 자바스크립트에서 개념적으로 가장 중요한 2 파트가 있는거 같다고 언급한 적이 있었다. 그중 두번째가 지금 알아볼 파트다 저번 중요 파트에서 개인적으로 자바스크립트의 "영리함", "치밀함"을 느꼈다면, 이번 파트에서는 자바스크립트의 "친화력"을 느꼈다 무슨 말일까? 이 글에서 알아볼 것 동기(sync) & 비동기(async) 코드 콜백 함수 자바스크립트 엔진과 브라우저의 의사소통 (이벤트 루프) async / await 키워드 이번 글 또한 앞선 글들과 같이 목차를 나눠놨지만, 개념들이 서로 엉켜있어 목차의 의미가 앞선 글들보단 희미할것이다. 정리 또한 목차를 따르겠지만, 밑에서 살펴볼 개념이 앞선 개념을 살펴볼때 나올 수도 있다 1. 동기(sync) & 비동기(async) 코..
리액트를 공부하거나 작업하다 보면 배열를 활용하는 경우가 매우매우 많다. 보통 배열로열 이루어진 데이터를 map() 메서드를 통해 배열 요소들을 뽑아내는데, 이때, 기능은 정상적으로 작동하지만 콘솔에 Warning이 뜰것이다. 이 Warning 메시지를 읽어보면 "고유한 key prop이 필요"하다고 말해준다. 여기서 말하는 고유한 key prop이 뭘까? 또한, 이 Warning을 어떻게 해결할 수 있을끼? 이 글에서 알아볼 것 key prop 1. key prop 위에서도 언급했지만, 배열을 정상적으로 렌더링 하려면 고유한 key prop이 필요하다. 왜 그럴까? 배열 데이터의 요소들을 렌더링하여 리스트를 만들고, 거기에 새로운 요소를 동적으로 추가한다는 상황을 가정해보자 고유한 key prop이 없..
자바스크립트에서는 숫자를 어떻게 다룰까? 또한, 태그된 템플릿은 뭘까? 이 글에서 알아볼 것 자바스크립트에서의 Number 객체와, 부동 소수점 BigInt 태그된 템플릿 1. 자바스크립트에서의 Number 객체와, 부동 소수점 자바스크립에서의 Number는 모두 부동 소수점 숫자(Float)로 이루어져있다 즉, 자바스크립트에는 다른 언어의 Integer같은 소숫점이 없는 Number는 존재하지 않는다 모든 Number는 64비트 부동 소수점 수로 저장된다 이러한 Number에는 최대값과 최솟값이 존재하고, 정밀도에도 한계가 존재한다 console.log(Number.MAX_SAFE_INTEGER); // 최대 정수값 => 9007199254740991 (2^53 -1) console.log(Number..
리액트를 스타일링하는 방법으로는 3개가 존재한다. 인라인&일반CSS는 논외로 치고, 보통 styled-components 와 css module를 많이 비교하는데, 해외 사이트에서 비교한 글들을 몇개 가져와 보았다. https://reactjsexample.com/performance-comparison-of-css-in-js-libraries/ Performance Comparison of css-in-js Libraries Performance comparison of css-in-js libraries reactjsexample.com https://dev.to/alexsergey/css-modules-vs-css-in-js-who-wins-3n25 위 링크는 의견을 말하지는 않았지만, styled..
프론트엔드 공부를 시작하고, 인강을 구매하여 처음 자바스크립트를 공부할 때, 자바스크립트를 포기했던 파트다... 물론 앞에 내용들도 어렵고 이해가 가지 않았지만, 반복해서 듣고 따라치고해서 겨우 넘겼다, 하지만 이부분은 도저히 이해가 안갔다. 그 후 바로 리액트로 넘어갔다,,, 지금 다시 공부하면서 그때 왜 그랬을까 생각해보면, 개념 위주의 내용이고, 앞에 기본기가 부족해서 그랬던거 같다. 이렇게 사설을 길게 쓴 이유는, 내가 느끼기에 자바스크립트에서 가장 중요한 개념위주의 파트가 2가지 있는 것 같은데, 그 중 하나이기때문이다. (물론, 모든 파트가 중요하다) 또한, 다시 공부했을 때 내가 여태까지 공부를 잘못된 방향으로 하고있지 않다는걸 간접적으로 느끼게된 파트기도 하다. 이 글에서 알아볼 것 순수함..
개인적인 생각이지만, "나 자바스크립트로 웹페이지 만들수있어요"라고 말할때 가장 티낼수있는 부분이 이벤트 파트라고 생각한다. 웹사이트를 구현했을 때 가장 임펙트있는 부분은 이벤트를 통한 기능일테니까 말이다. 나 또한 처음 이벤트부분을 공부할때 그냥 addEventListener로 이벤트 리스닝하고, 함수 트리거 하면 끝, 이라 생각했고 이렇게만 하면 대충 클릭할때 이벤트 발생 ~, 양식 제출도 할 수 있고~ ... 지금 다시 복습하면서 느낀점은 여기가 절대 단순한 파트가 아니고 여러 원리를 이해해야 진정으로 이벤트를 다룰수 있다고 생각하게 되었다. (예를들어, form으로 양식제출시 event.preventDefault() 사용하긴 했는데,, 그냥 백엔드로 전송되는거 막아준다, 라고만 알고 사용했었다....
저번 글에서 리액트의 기본 개념들을 살펴보았다. 리액트의 작동논리를 알아보면서 어떻게, 어떤게 렌더링되는지 확인했고, props을 알아보면서 어떻게 데이터를 이동하는지 확인하였다. 그러면서 자동적으로 따라오는 궁금증이 생겼다. 렌더링되는 것은 알겠는데, 우리는 정적인 것만 렌더링하는 것이 아닌, 동적인 것도 렌더링하고 싶다. 어떻게 할까? props을 통해 상위 컴포넌트 -> 하위 컴포넌트 데이터 이동은 이해했다. 그러면 하위 컴포넌트 -> 상위 컴포넌트 데이터 이동은 어떻게 할까? 이 두가지를 중점적으로 살펴보고, 이와 연관있거나 알아야하는 개념들도 살펴보려한다. 이 글에서 알아볼 것 React에서 동적인 렌더링 하는법(state) 사용자 입력값 컨트롤하기 이전 state 활용법 데이터 끌어올리기 1...
