혜르미온느

경력의 대부분을 Vue로 보내다가 react 잠깐 react Native 잠깐 발을 담구었던 나는 리액트에 대해서 아직 모르는게 한 가득이다. 그 중 리액트의 꽃(내 마음대로)인 Hook. 커스텀 훅을 작성하여야 하는데, hook을 Hook답게 사용하는 방법에 대하여 궁금해졌다. 참고로 나는 리액트도 뷰처럼 쓰는 것 같다ㅠㅠ ✔️ Hook의 규칙 최상위 레벨에서만 호출하기 hook은 반복문, 조건문 또는 중첩된 함수 내에서 hook 호출이 금지된다. 그래야 컴포넌트가 랜더링 될 때마다 동일한 순서로 Hook이 호출되는 것을 보장할 수 있다. React 함수 내에서 호출하기 JS 함수 내에서 호출은 불가하다. ✔️ Hook의 특징 함수 앞에 use를 붙인다. JSX가 아닌 [] 혹은 {}의 형식으로 ret..

TMI. 자꾸 날리는 바람에 이 주제 관련 포스팅만 몇 번째 쓰는지 모르겠다 ㅠㅠ 리액트 공식 홈페이지에서는 create Potals를 다음과 같이 설명하고 있다. Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Potals는 부모 컴포넌트의 DOM 계층 구조의 밖에 존재하는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다는 의미이다. 이게 무슨 의미일까? 내 식대로 해석해보자면 다음과 같다. 게임을 많이 하는 편은 아니지만 RPG게임에서 미션을 받으면 [ㅇㅇ으로 이동하세요. 포털을 이용하면 더욱 빠릅니다]와 같..

프론트앤드 개발을 하다보면 각 컴포넌트간의 데이터 교환을 해야하는 상황이 정말 많다. 가장 보통은 props로 하위 컴포넌트에 데이터를 전달해 주는 방식을 택할 것이다. 다만 전달하려는 데이터가 컴포넌트의 하위의 하위에서만 쓰인다면 props는 한 곳에서 사용되기 위하여 여러개의 컴포넌트를 거쳐야 할 것이다. 혹은 전달하려는 데이터가 여러 컴포넌트에서 필요로 하는 정보라면 같은 데이터를 각각의 컴포넌트에 중복적으로 내려주어야 할 것이다. 물론 상태관리 시스템을 이용하여 데이터를 저장하는 것도 하나의 방법이지만, 이러한 불필요한 공수를 줄이기 위해 react에서 직접 기본기능으로 제공하는것이 있었으니 바로 react context이다. - context 사용 시, 장점 react context를 이용하면 ..

빠름의 민족인 우리는 웹사이트가 조금만 느려도 매우 화를 내며 사이트를 이용하지 않는다.( = 는 나) 그래서 프론트앤드 개발자는 성능에 민감하게 반응하는 편이라 사이트가 무거운 것을 두고 볼 수가 없다.(이것도 나) 여러 코드를 통해 SPA를 개발하고 나면 웹팩을 이용하여 번들링 하고, 번들된 자바스크립트 파일을 html에서 불러와 실행하는 코스는 웹을 공부해본 사람이라면 몰라도 아는(?) 개념이다. 번들링이란 여러 작업 코드를 하나의 파일로 병합해주는 것을 의미한다. 그런데 코드가 점점 많아지면 번들 파일도 함께 커지면서 성능이 현저하게 느려질 수 밖에 없다. 여담으로 현직에서 보면 라이브러리를 사용하길 싫어하는 개발자들을 꽤나 만날 수 있는데, 많은 라이브러리 혹은 무거운 라이브러리를 사용하게 되면..

원하는 기능을 구현하기 위하여 syntheticEvent를 체크하던 중 싹 한 번 정리했으면 좋겠다는 생각이 들어 포스팅을 작성한다. syntheticEvent는 한국말로 하면 합성 이벤트라는 뜻인데, 왜 react syntheticEvent가 생겨났을까? 이벤트 핸들러는 (사실 이벤트 핸들러 뿐 만 아니라 다른 것들도) 브라우저마다 이름이나 처리 방식등이 조금씩 다르다. 어떠한 브라우저에서 잘 동작하던 기능이 다른 브라우저에서는 오류나는 것이 그 이유이다. 이를 해결하기 위하여 리액트에서는 브라우저마다 서로 다른 이벤트를 모아 하나의 합성 이벤트로 제공해준다. 즉, 합성 이벤트를 사용하면 모든 브라우저에서 동일하게 동작하기 때문에 크로스 브라우징 문제를 해결할 수 있게된다. 즉, 다양한 브라우저들에서 ..

프론트엔드를 접해보신 분들은 누구나 다음과 같은 고민을 해보신 적 있을겁니다. 상태관리 여기서 관리 대상인 상태란 무엇일까요? 개인적으로 고민했을 때에는 언제든지 변경될 수 있는 데이터를 '상태'라고 일컫는 것 같아요. 변경의 여지가 있으니 관리를 해 주어야 하는 데이터가 되니까요. 그럼 여기서 프론트엔드적 측면에서 관리해야하는 데이터는 크게 두가지가 있습니다. 서버 데이터와 클라이언트 데이터. 서버에서 받는 데이터의 특징 클라이언트와 다른 공간에서 관리되어짐 get/update 과정에서 비동기 API가 필요함 불특정 다수와 공유되는 데이터로 사용자가 의도하지 않은 변경들이 일어날 수 있음 클라이언트에서 받는 데이터의 특징 클라이언트 소유의 공간에서 관리되어짐 비동기적 API가 필요하지 않음 다른 사람과..

나같은 경우에는 가끔 간단한 테스트를 하고 싶은데, VS 혹은 인텔리J를 열어 실행시키기가 귀찮을 때가 있다. (귀차니즘 ㅜㅜ) 그러할 때 사용하기 좋은 리액트 온라인 코드 편집기를 소개한다! 이는 리액트 기반으로 세팅되어있는 URL이며, 별도의 설치 및 실행 등의 과정이 없이도 리액트가 돌아가는 환경을 제공해준다. CodePen https://ko.reactjs.org/redirect-to-codepen/hello-world https://ko.reactjs.org/redirect-to-codepen/hello-world Redirecting to Codepen... ko.reactjs.org CodeSandBox https://codesandbox.io/s/new React - CodeSandbox ..

[!이시중] 2021년 11월 20일 12:43에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/62 에서 확인할 수 있음. react CRA는... 정말 모든 게 다 있다. 코딩을 하던 중 eslint 규칙을 한 곳에서 설정해야겠다.라고 생각이 들어 package.json을 찾아보니, 웬걸. react CRA는 eslint까지 설정하고 있었다. 덕분에 손 안 대고 코 풀 정도로 쉬운 설정이 가능하였다. 보통은 명령어를 통하여 많이 설치하곤 한다. npm i eslint https://www.npmjs.com/package/eslint eslint An AST-based pattern checker for JavaScript.. Latest version: 8.18.0, la..

어느 날 들어온 요건 하나. 'nextTick 시점에서 실행해주세요.' vue를 익숙하게 써왔던 나는 vue 프로젝트에서 nextTick을 정말 요긴하게 잘 사용했었는데, 현재 react에서 진행하고 있는 프로젝트에 nextTick을 넣으려니 가만있어보자... 어떻게 표현하는 거였더라? 막히게 되었다. 그래서 정리해본 useEffect와 useLayoutEffect. 사실 실무에서는 useEffect를 압도적이게 많이 사용하긴 했는데, 둘이 어떻게 다른지 한 번 살펴보자- 먼저 nextTick이란 화면이 랜더링 될 때, js의 비동기성 특징으로 접근하고자 하는 DOM을 찾지 못하는 현상을 해결해주는 callBack 함수이다. updateMessage: function () { this.message = ..

(이 포스팅까지 흘러 들어왔다면 자바스크립트에 대하여 아주 얕게라도 안다는 기준 하에-) 스크립트를 짜다보면 컴포넌트를 만들어 사용성을 높이는 코드를 굉장히 많이 고민하게 된다. 컴포넌트를 호출하게 되면 하위(자식) 컴포넌트들도 함께 호출하게 되는데, 문제는 여기에서 시작된다. 내가 컴포넌트 내에세 하나의 상태 값을 변경하였을 때, 함께 온 자식 컴포넌트들까지 모두 랜더링 되는 상황이 발생하기 때문이다. 이렇게 되면 불필요한 랜더링의 반복으로 의도하지 않은 메모리 과사용 등 여러 문제가 발생하게 된다. 이렇게 의도하지 않은 상황을 막고자 처리하는 방법이 바로 useMemo와 useCallback Hook의 사용이다. 이 둘은 비슷하면서 다르기 때문에 많이 비교된다. useMemo const memoize..