JavaScript13 [JavaScript] ReactJS: useEffect component가 처음 render될 때만 코드를 실행시키고 싶은 경우 ex) API를 통해 데이터를 가져오는 경우: rerender될때마다 실행하여 데이터를 다시 가져오고 싶지 않다 위 경우 state가 변할 때마다 매번 해당 component 전체가 rendering 된다 useEffectrendering 여부와 상관없이 코드를 최초 1회 or 원하는 조건 충족시 실행하는 방법 언제 어떤 코드를 실행시킬것인가 (rendering 될 때마다 실행되지 않음) console.log로 실행 여부를 확인 상태값(counter, keyword)을 관리 + useEffect를 통해 특정 조건에서만 특정 작업을 수행useState와 useEffect를 활용해 다양한 상태와 조건에서 사이드 이펙트를 관리하는 방법을.. 2024. 11. 1. [JavaScript] ReactJS: Create React App node js를 다운로드 받아 설치하기 https://nodejs.org Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org styles.css를 import: styles.css에서 작성한 서식이 index.js 전체에 적용된다 => 바람직하지 않음 🤔 css 모듈화🤓: style들도 modular가 될 수 있다! 1) Button.module.css 파일 만들기 (파일명을 'ㅇㅇㅇ.module.css'로) 2) Button.js에서 import하여 적용 3) style.btn 서식을 다른 파일에서도 사용할 수 있다! 2024. 10. 25. [JavaScript] ReactJS: Props / React.memo 컴포넌트 = 함수대체로 맞는 말함수형 컴포넌트는 React에서 가장 기본적인 컴포넌트 유형 중 하나 React 컴포넌트는 JavaScript 함수처럼 작동 props를 매개변수로 받아 UI를 반환 Btn 컴포넌트는 2개의 props를 받음: {text, big} App 컴포넌트는 3개의 Btn 컴포넌트를 사용하여 3개의 버튼을 생성 App 컴포넌트는 Btn 컴포넌트를 재사용하여 여러 버튼을 쉽게 생성할 수 있음 부모 컴포넌트 변경이 자식 컴포넌트에 어떤 영향을 미칠까? : 기본적으로 React는 부모 컴포넌트가 재랜더링(re-rendering)되면 자식 컴보넌트들도 전부 다시 렌더링 React.memo - 이전 props와 새로운 props를 비교하여 동일한 경우 해당 컴포넌트를 다시 렌더링하지 .. 2024. 10. 24. [JavaScript] ReactJS: STATE(2) 💻미션: Unit Conversion(minutes -> hours) App 만들기💻 DOM(Document Object Model) - 웹페이지 HTML elements를 트리 구조로 표현한 것 - DOM 구조 내 원하는 element에 접근해서 수정 가능 Virtual DOM - 실제 DOM의 복사본 - JavaScript의 메모리에 저장된 JavaScript 객체에 불과: 실제 UI에 영향을 미치지 못함 - Reconciliation(재조정): 변경된 element만 실제 브라우저 화면에 적용 - 항상 2개의 가상DOM이 존재: 변경 이전 & 변경 이후 - 매번 DOM을 조작할때마다 브라우저 화면의 UI를 새롭게 그릴 필요가 없음 https://ko.legacy.reactj.. 2024. 10. 22. [JavaScript] ReactJS: STATE(1) ReactJS에서 'State'State(상태): 컴포넌트 내부에서 관리하는 데이터 / 컴포넌트의 동적 상태를 반영 / 변경 가능 Props(속성): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 값 / 컴포넌트 외부에서 설정 / 읽기 전용 ex. '버튼 클릭 수(counter)'를 state로 관리할 수 있다 1. 수동 렌더링: 새롭게 바뀐 부분(클릭 수)만 rendering - 새 Container 컴포넌트를 생성하는게 X - 전체를 재생산하지 않고, 변경된 부분만 업데이트한다Container: JSX로 정의된 함수형 컴포넌트 2. 자동 렌더링: 데이터가 바뀔 때마다 Container를 rerendering & refresh UI(권장) - 위 방법의 단점: 데이터가 바뀔때마다 렌더링 함.. 2024. 10. 21. [JavaScript] ReactJS: Basics 💻미션: 클릭하면 클릭 수 세는 버튼 만들기 💻 Vanilla HTML 1) HTML 만들기2) JavaScript에서 가져오기3) listen for the event4) update the data & HTML ReactJS:애플리케이션이 interactive하도록 만들어주는 라이브러리 ReactDOM(Document Object Model) : 모든 React 요소들을 HTML body에 둘 수 있도록 해주는 라이브러리 (React 애플리케이션을 브라우저에 렌더링) (React elements -> HTML) 1) ReactJS, ReactDOM import하기 2) body 안에 empty 만들기: 나중에 여기서 ReactDOM이 React elements를 가져다놓는다 3) .. 2024. 10. 21. 이전 1 2 3 다음 반응형
