혜르미온느

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에서 불러와 실행하는 코스는 웹을 공부해본 사람이라면 몰라도 아는(?) 개념이다. 번들링이란 여러 작업 코드를 하나의 파일로 병합해주는 것을 의미한다. 그런데 코드가 점점 많아지면 번들 파일도 함께 커지면서 성능이 현저하게 느려질 수 밖에 없다. 여담으로 현직에서 보면 라이브러리를 사용하길 싫어하는 개발자들을 꽤나 만날 수 있는데, 많은 라이브러리 혹은 무거운 라이브러리를 사용하게 되면..

리덕스 공식 홈페이지에 가면 이런 말이 있다. A Predictable State Container for JS AppsGet Started 바로 자바스크립트를 위한 예측 가능한 상태의 저장소라는 의미이다. 프로그램의 몸집이 커질수록 여러가지의 상태와 컴포넌트들이 생겨나고, 이들이 서로 유기적으로 얽혀있어 거대한 복잡도를 가지게 된다. 리덕스는 이러한 복잡성을 해소해주고, 상태들을 예측 가능하게 해준다는 의미이다. 1. 단 하나의 상태를 갖는다. 하나의 객체(store) 안에 프로그램에서 필요한 모든 상태를 넣는다. 2. 예고없이 상태값을 변경하는 행위를 사전에 차단한다. (읽기 전용이다) dispatcher/reducer를 통해서만 객체를 수정할 수 있으며, 스테이트 값이 바뀔 때 마다 각 상태 사용처..

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

나같은 경우에는 가끔 간단한 테스트를 하고 싶은데, 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..

[!이시중] 2021년 11월 1일 22:53에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/44 에서 확인할 수 있음. react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번에 된다는 점이었다. hook에 대한 자세한 사항은 다음 포스팅을 읽으면 좋을 듯 하다 -! https://yuniel.tistory.com/42 [뷰쟁이의 리액트 시작하기] 리액트 hook 이란? React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이 yuniel.tistory.com 아무튼 개인적으로 그..