본문 바로가기

전체 글

 (359)
React Hooks -useState에 대하여 출처: https://www.youtube.com/watch?v=G3qglTF-fFI&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO useState function heavyWorkd() { // 뭔가 엄청 무거운 작업 } useState(()=>{}) // 또는 useState(heavyWork) useState(heavyWork())이 아닌, 위의 예시처럼 콜백 형식으로 무거운 작업을 넣어주면 맨처음 렌더링 될 때 한번에만 불린다. 즉 초기값을 가져올 때 무거운 함수를 가져온다면 콜백 형식으로 넣어주기. import { useState } from 'react'; const App=()=>{ const [names, setNames]=useState(['']); const [..
컴포넌트의 라이프사이클, useEffect 컴포넌트가 랜더링 되면 DOM Tree에 붙는 순간이 있을 것입니다. 그 붙는 순간에 특정작업을 할 수 있게 하는 것이 componentDidMount입니다. componentDidMount는 처음 랜더가 성공적으로 실행되었을 때 실행됩니다. 그 후 setState같은 것으로 rerendering이 일어날때는 componentDidMount는 실행되지 않습니다 구체적으로 언제 componentDidMount가 유용하게 사용되는가? setSTate를 render함수 내에서 쓰면 무한히 리랜더링이 일어나기 때문제 setState를 render함수 내부에서는 쓸수 없다는 것을 배운적이 있다. 즉 상태는 바꾸고 싶지만 render함수 내부에는 쓸 수 없을때 바뀌는 행위를 componentDidMount안에 작성..
React Hooks - useMemo(컴포넌트의 성능 최적화를 위해 사용되는 hook! useMemo와 useCallback) 출처: https://www.youtube.com/watch?v=e-CnI8Q5RY4 참고: https://velog.io/@eeeve/React-Hooks-useMemo (깔끔함) (잠깐 복습. 컴포넌트 최적화를 위해 사용되는 대표적 2가지 Hooks ==>> useMemo, useCallback 두번째 인자로 배열을 취하는 훅스 useEffect, useMemo, useCallback. useEffect는 component life cycle과 밀접하게 연관됨. 2번째 인자로 아무것도 안주면 componentDidUpdate의 역할을, 빈배열을 주면 componentDidMount의 역할을 함. useMemo 함수의 결과값을 반환함. useCallback 함수객체를 반환) useMemo에서 Memo란..
html 태그의 속성의 중요성에 대하여(html의 input태그의 type="email"에 대하여) 위와 같이 input태그의 type="email" 이라고 설정하면 html언어 자체적으로 input안에 들어가는 문자열을 검열하여 '@'이 들어가있지 않으면 자체적으로 에러를 발생시킨다. 즉, 내가 '@' 기호가 있는지 없는지를 검사하라고 코딩해 준것도 아니고 없다면 아래와 같은 오류를 발생시키라고 명령한 적도 없는, html자체의 고유한 기능이다. 이와 같이 html태그의 속성은 매우 중요한 역할을 한다. 지금은 일일히 그것을 다 알수 없어도 각각의 속성들은 중요한 역할을 한다. 예를들어 서버에 데이터를 전송할때나 label태그와의 상호작용을 할때 input태그의 속성들은 각각 저마다의 역할이 있다.
이벤트 리스너, 콜백, 이벤트 버블링에 대하여 이벤트 리스너 이벤트 리스너는 말 그대로 해당 이벤트에 대해 대기중인 겁니다. 항상 리스닝 중이죠. 해당 이벤트가 발생했을 때 등록했던 이벤트 리스너가 실행됩니다. window.onload = function () { alert('I\'m loaded'); }; 위의 코드를 보신 적이 있을지 잘 모르겠습니다만, 이 코드가 대표적인 이벤트 리스너입니다. window가 load될 때에 function 부분이 실행되는거죠. load됐다는 것을 누가 알려주냐면, 브라우저가 알려줍니다. 비슷한 코드로, 그리고 자주 쓰이는 코드로 onclick이 있습니다. 이벤트 리스너는 항상 on + '이벤트명'으로 명명됩니다. 자주 쓰이는 이벤트의 목록을 알려드리자면, onblur(객체가 focus를 잃었을 때), onchan..
html form태그 속성과 그 속성에 근거하여 연결된 input, button태그와의 연관성에 대하여 html의 input태그의 type을 submit으로 하면 버튼모형으로 바뀌고 submit이 아니면 텍스트를 입력할 수 있는 input창으로 변함. input태그를 감싸고 있는 form태그의 onSubmit 이벤트 핸들러에 js로 어떠한 함수를 등록시켜 놓으면 input태그의 type속성의 값을 submit으로 주었다는 전제하에 그 함수가 실행된다. 즉 form태그의 onsubmit이벤트 핸들러의 실행은 form태그 그 자체와는 관계없이 그 안에 있는 input태그나 button태그의 속성인 type을 submit으로 지정한 것과 연관된 것이다(그 버튼을 누르면 onSubmit의 값으로 할당된 함수가 실행되는 것이다. 참고:https://penguingoon.tistory.com/188
@emotion/babel-plugin "정신이 번쩍든다... 개발이라고 해서 뭐가 다르겠냐. 결국 변별되는 개발자는 독해력이 있는 개발자다. 그 진부한 거 말이다. " 상황: SLEACT프로젝트중 alecture폴더에 pages폴더에서 styles.tsx폴더에 import styled from '@emotion/styled'; @emotion/styled 라이브러리 관련 설정하는 중 webpack.config.js파일에 https://www.npmjs.com/package/@emotion/babel-plugin 이 공식문서에서 @emotion/babel-plugin 에 관하여 해석하고 있는 상황. 위 사이트에 있는 표중 중요한 것은 나는 위의 표가 @emotion/babel-plugin 를 설치하면 얻을 수 있는 특징이라고 해석하지도 못했다..
Code splitting(코드 스플리팅)에 대하여 공부동기: 제로초 영상시청중 소개됨 https://www.inflearn.com/course/lecture?courseSlug=%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%B1%84%ED%8C%85&unitId=71103&tab=community 출처: https://www.nextree.io/code-splitting/ 요약: Code splitting이란 UX(사용자 경험)를 좋게 하기 위한 것으로 초기 페이지 로딩속도를 계선하기 위한 방법이다. Code splitting의 구체적 방법으로 lazy, suspense가 사용된다. (페이지 로딩속도 개선에 대해 언급하니 이 영상이 생각남 https://www.youtube.co..

티스토리툴바