윤제니

React 컴포넌트 LifeCycle React Hooks - useEffect() 컴포넌트 내부에서 발생하는 네트워크 요청, 데이터 가져오기,타이머, UI 업데이트 등의 작업을 다루기 위한 Hook 컴포넌트의 렌더링이 완료된 후에 실행됨 매 렌더링마다 자동으로 호출됨 useEffect(() => { 인자A // TODO, Callback 함수 }, [인자B]); useEffect의 인자 첫 번째(인자A) : Callback 함수, 컴포넌트 내부에서 발생하는 작업 두 번째(인자 B): Dependency Array, 의존성 배열에 포함된 값들이 변경될 때마다 useEffect 가 다시 실행됨 만약, 의존성 배열이 비어있는 경우 => useEffect은 컴포넌트가 처음 마운트 될 때만 실행되고 언마운트 될..

useState 사용 시 주의할 점 App.js import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 ) } 위의 "+3" 버튼을 클릭하면 호출 횟수에 관계없이 이벤트 핸들러 내부 number 값은 항상 0 setNumber(1)이 계속 호출이 되는것이다. => 리액트는 이벤트를 일괄 처리하지 않으며 별도로 처리된다. "+3"버튼을 클릭할 때마다 number 값은 1,2,3... 이렇게 1씩 숫..

Component component 생성 및 사용 방법 - NewComponent.js 생성 const MyComponent = () => { return 컴포넌트 }; export default MyComponent; 위의 컴포넌트를 App 컴포넌트에서 불러와 사용 (import를 사용하여 모듈 불러오기) import NewComponent from './NewComponent'; const App = () => { return ; }; export default App; Props : properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능. - JSX 내부에서 props 렌더링 const NewComp..

React 자바스크립트 라이브러리 오직 V(view)만 신경 쓰는 라이브러리 Component 기반의 UI 라이브러리 선언형 프로그래밍 Virtual DOM 사용 초기 렌더링 render() {...} 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요한데 리액트에서는 render 함수 사용 - 컴포넌트가 어떻게 생겼는지 정의 - 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환 - HTML 마크업 후 실제 페이지의 DOM 요소 안에 주입 컴포넌트 특정 부분이 어떻게 생길지 정하는 선언체 => 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 호출한다. render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, ..

public/폴더 이미지를 public/ 폴더에 저장하고 index.html 또는 index.css 파일 내에서 직접 참조 가능 public/에 저장된 이미지가 프로젝트 개발 서버 및 프로세스에 의해 공개적으로 제공되기 때문. 브라우저 내에서 직접 방문이 가능하고, 다른 파일에 의해 요청될 수도있음. src/assets/폴더 이미지를 src/assets/폴더(또는 src 폴더의 어디든)에 저장 가능 src 또는 src/assets/과 같은 하위 폴더에 저장된 모든 파일은 공개적으로 제공되지 않음. 웹사이트 방문자가 접근할 수 없음. src 또는 src/assets 같은 하위 폴더에 저장된 파일은 코드 파일에서 사용할 수 있음. 코드 파일에 가져온 이미지는 빌드 프로세스에 의해 인식되어 최적화 되며, 웹사..