WEB/React7 [React] useEffect 과 useLayoutEffect의 차이점 코드 리뷰를 하면서 이런 피드백을 받게 되었다 🤔🤔 useLayoutEffect요..? 데이터를 fetching해서 초기 state값을 fetching한 데이터 값으로 바꾸는 로직을 useEffect를 사용해서 구현했다. 초기 화면을 그리기 전에 필요한 데이터를 넣는 부분은 지금까지 계속 useEffect로 구현했었기에 useEffect를 사용했는데 갑자기 useLayoutEffect라는 친구가 등장했다. 이름이 비슷하니까 useEffect와 비슷한거 같긴하데 정확하게 뭐길래 실행 순서에 따라 사용해야하는 훅이 다른걸까? useEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); useLayoutEffect.. 2023. 11. 1. [React] 리액트 기본 구조 분석하기 index.js 리액트 프로젝트에서 제일 먼저 실행되는 파일 ReactDom.createRoot()를 통해 리액트 프로젝트의 기본 진입점 생성 ReactDOM.createRoot(document.getElementById('root'));는 리액트 프로젝트가 로딩 되었을 때, 웹 페이지의 어디에 배치되어야 하는지 리액트에게 알려주는 역할을 함 public 폴더의 index.html가 리액틔 기본 진입점 index.html 안에 있는 `` 에 리액트로 만든 사용자 인터페이스가 렌더링 됨 root.render(); ReactDom.createRoot()으로 선택한 에 어떤 걸 렌더링 해야 하는 지 리액트에게 알려주는 역할 에 아무것도 없지만 으로 대체 됨 JSX 문법으로 작성되어 있음 컴포넌트 App.js .. 2023. 9. 23. [React] 컴포넌트란? 리액트에서 컴포넌트가 왜 중요할까? 리액트에서는 모든 사용자 인터페이스는 컴포넌트로 구성되어 있기 때문이다. 어떤게 컴포너트가 될 수 있을까? 사용자 인터페이스에 있는 재사용 가능한 구성 요소 컴포넌트란 HTML + CSS + Javscript가 조합된 것 왜 컴포넌트일까 구성요소를 분산시킬 수 있다 > 코드 베이스르 작고 관리하기 좋게 유지할 수 있다 - 하나의 컴포넌트에는 분명한 주제, 초점이 있다 > 컴포넌트가 집중적으로 다루는 구체적인 작업이 있게 됨 재사용 가능하다 > 반복을 피할 수 있다 리액트는 컴포넌트가 전부다, 조합하기 위한 컴포넌트를 만드는 게 전부이다! >> 리액트를 활용해 재사용 가능하고 반응형 컴포넌트를 만들 수 있다 컴포넌트를 만들기 위해 리액트는 '선언형 접근법'을 사용한다 -.. 2023. 9. 23. [React] Context API vs Redux 프로젝트를 진행하면서 리액트 학습 중 Context API를 배우게 되었다. 상태관리를 위해 Redux를 사용해보는 건 어떻냐라고 팀과 얘기를 하는 중이었는데, Context API가 Redux가 하는 역할과 너무 비슷한 기능을 제공해주는 것 같았다. 그러면 Context는 왜 사용하고 Redux 대신 사용할 수 있을까 라는 궁금함이 들었다. 기술선정을 위해 둘의 차이를 확실하게 알고 선택하기 위해 차이점에 대해 정리하게 되었다. 상태관리란? 상태관리는 시간이 지남에 따라 상태가 변경되는 방식을 의미한다. 예를 들어 이런 경우를 상태관리라고 한다. 초기 값을 저장한다. 현재 값을 읽을 수 있다. 값을 업데이트 할 수 있다. React의 useState()가 상태관리의 예라고 할 수 있다. hook을 호출.. 2023. 7. 19. [React] Element 랜더링 인프런의 [처음 만난 리액트] 강의를 학습하면서 공부 + 정리한 내용입니다 Element란? Element란 리액트 앱을 구성하는 요소로 리액트의 앱을 구성하는 가장 작은 단위입니다! 화면에서 보이는 것들을 기록하는 것이죠. const element = Hello, world; 이 Element라는 단어는 브라우저의 DOM에서도 많이 들어봤을텐데요. 리액트 Element와 DOM Element는 어떤 차이가 있을까요? Virtual DOM과 Browser DOM의 차이? DOM Element는 브라우저의 실제 DOM에 존재하는 Element입니다. 그렇기 때문에 리액트 Element에 비해 많은 정보를 담고 있어서 크고 무겁습니다 반면, 리액트 Element는 일반 객체(plan object)로 쉽게 생.. 2023. 7. 3. [React] JSX란? (정의, JSX 동작 원리, 문법) 인프런의 [처음 만난 리액트] 강의를 학습하면서 공부 + 정리한 내용입니다 JSX란? 자바스크립트의 문법을 확장시킨 것으로 자바스크립트 파일 안에서 자바스크립트를 HTML 마크업처럼 사용할 수 있게 해줍니다. 즉, JSX는 JSX = JavaScript + XML(HTML) 이렇게 나타낼 수 있습니다. const ele = Hello, world; 컴포넌트를 작성하는 다른 방법도 있지만 대부분의 리액트 개발자들을 JSX로 작성하는 걸 선호하고 대부분의 코드들도 JSX로 되어 있습니다! JSX는 JS로 어떻게 변환되는 걸까? 하지만 브라우저는 JSX를 이해하지 못하기 때문에 Babel과 같은 컴파일러를 이용해 내부적으로 JSX를 자바스크립트로 변환합니다. React 17이전 버전에서는 이 역할을 React.. 2023. 6. 18. 이전 1 2 다음
