본문 바로가기

전체54

Portals 언제 까지 부모 컨포넌트 아래에 jsx, tsx를 렌더링 할 것인가 이 지겨운 일상에서 탈출 시켜줄 portals를 소개해 드리겠습니다. Portals란? 리액트 16 버전 이상에서 도입된 기능으로 React 컴포넌트를 다른 DOM 노드에 렌더링할 수 있게 해주는 기능. 이것을 사용하면 현재 컴포넌트 트리 외부의 DOM 요소에 렌더링 해줄 수 있음 아래 코드펜에서 확인해 보자 See the Pen portals by SeungYn (@SeungYn) on CodePen. 사용법은 아래 코드처럼 ReactDOM.createPortal()인자에 첫번 째로는 jsx를 두번 째로는 렌더링할 부모 노드를 넣어주면 된다. function Portal(){ return ReactDOM.createPortal(포탈생성.. 2023. 3. 11.
액션 실행시 env 파일 적용시키기 aws s3에 깃허브 액션으로 배포를 하면 env 파일은 gitinore 파일에 명시되어있어서 업로드 되지 않는다. 이걸 깃허브 액션으로 env 파일을 만드는 법은 일단 첫 번째로 secrets and variables > Actions 로 들어가서 new Secret 를 누루고 사용할 키와 값을 넣어준다. 그 다음 액션 스크립트에서 다음 과 같이 작성한다. echo "REACT_APP_TEST2=${{secrets.REACT_APP_TEST2}}" >> .env 이 뜻은 echo 내용을 .env 파일 안에 작성한 다는 뜻 cat .env 는 .env를 출력한다는 뜻이다. 이제 push 를 해서 깃허브액션이 실행되게 해보면 다음 과 같이 나타난다 정상적으로 env 파일에 저장되었다는 뜻 2023. 3. 10.
Critical Rendering Path CRP를 보기전에 DOM, CSSOM, Render Tree에 대해 간단히 봅시다. DOM이란? Document Object Model로 HTML 파일을 브라우저에서 읽게 되면 태그들을 분석해서 자바스크립트 Node라는 Object로 변환 됩니다. 이것을 통해 웹페이지의 요소들을 선택하고, 조작하고 변경을 할 수 있는 겁니다. CSSOM이란? DOM + CSS로 DOM과 우리가 정의한 CSS 파일을 파싱하여 합친것을 말합니다. 마지막 Render Tree란? 이렇게 만들어진 DOM과 CSSOM을 합친 것으로 최종적으로 렌더링 될 노드들만 나타나 있습니다. 만약 display:none인 아이는 여기에 포함이 되질 않습니다. 그래서 렌더링은 어떻게 되는데? 웹페이지를 요청하면 아래 그림과 같은 과정을 거쳐서.. 2023. 3. 10.
연속된 커스텀 훅(훅인마) 어떻게 보면 당연한 건데 나 혼자 오해한 듯. 사건의 발단은 두 개의 커스텀 훅이 있다. 하나는 state값을 1초마다 증가해서 return 하는 훅 export default function useTest2() { const [state, setState] = useState(1); setTimeout(() => setState((f) => f + 1), 1000); return state; } 하나는 받은 값으로 다시 스테이트에 넣는 모습 export default function useTest1() { const data = useTest2(); const [test, setTest] = useState(data); console.log(data); console.log(test); return d.. 2023. 3. 9.

티스토리툴바