윤제니

💡 고유한 ID를 생성하는 방법 자동으로 고유한 ID를 추가해주는 UUID 사용하기 https://www.npmjs.com/package/uuid?activeTab=readme uuid RFC4122 (v1, v4, and v5) UUIDs. Latest version: 9.0.1, last published: 5 months ago. Start using uuid in your project by running `npm i uuid`. There are 59072 other projects in the npm registry using uuid. www.npmjs.com 테스트 DB를 생성하여 사용할때 고유한 ID가 필요한 경우 위 사이트에 접속하여 UUID를 사용하면 좋을것 같다. 아래의 순서는 위의..

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에 반영하지 않고, ..

React 공부를 하면서 강의에서 배우는 내용을 git에 업로드 하려 한다. Homebrew가 이미 설치되어 있었기 때문에 Homebrew로 Git을 설치 후 VSCode와 연동하였다. Git 설치하기 https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a plat..