코딩/java script | react16 [react] #10 리액트 폴더 구조 리액트의 주요 폴더 구조 먼저, React 공식 페이지 프로젝트 디렉토리 구조 관련 글입니다. https://ko.reactjs.org/docs/faq-structure.html 파일 구조 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org my-react-app/ ├── public/ │ ├── index.html │ └── favicon.ico ├── src/ │ ├── assets/ │ │ ├── images/ │ │ └── css/ │ ├── components/ │ │ ├── App/ │ │ │ ├── App.js │ │ │ └── App.css │ │ ├── Header/ │ │ │ ├── Header... 2023. 6. 19. [react] #9 Memoization 보호되어 있는 글 입니다. 2023. 4. 12. [react] #8 cloudinary image and vedio upload 보호되어 있는 글 입니다. 2023. 3. 29. [react] #7 다음 우편번호 서비스 보호되어 있는 글 입니다. 2023. 3. 28. [js] #6 addEventListner , innerHTML 스크립트 파일 연결 주로 바디태그 밑에 위치 시킨다. (Uncaught TypeError: Cannot read property 'addEventListener' of null -> HTML이 모두 로드 되기 전에 자바스크립트 영역에서 HTML을 참조하기 때문에 addEventListenr에서 HTML 태그를 참조할 수가 없어 null을 참조하여 에러 발생하기 때문) onClick 으로 할 경우. **온클릭보다 버튼에 이벤트 다는게, 여러 이벤트 동시에 가능해서 주로 사용됨 onclick="aaa()" ● document.write( ) : ()안에 것을 화면에 출력 ● window.alert() : 경고창을 띄워 ()안의 것을 출력 ● innerText;( ) :text 값만 변경 가능 ( 태그로 감싸.. 2023. 3. 12. [react] #6 useRef useRef() 란? useRef는 DOM 요소에 접근을 위해 사용이 되는 리액트 hook 이다. reference의 약자로 '참조'라는 의미. JavaScript 에서 특정 DOM 을 선택 시, getElementById, querySelector 같은 DOM Selector 함수를 사용 리액트에서 DOM 을 직접 선택 시, ' ref ' 사용. *함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수 사용. *클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용 특정 돔 선택 이유 - 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지, Video.js, JWPlayer .. 2023. 3. 8. [react] #5 useEffect, 의존성배열 useEffect() 함수란? 리액트 컴포넌트가 렌더링 될 때마다 특정 작업(Side Effect)을 실행할 수 있도록 하는 리액트 Hook 이다. *Side Effect - 컴포넌트가 렌더링 된 이후, 비동기로 처리되어야 하는 부수적인 효과들 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메소드를 사용할 수 있게 됨. 기본 형태 import React, { useEffect } from "react"; useEffect(func, deps) func : 실행하고자 하는 함수 deps : 배열 형태. function을 실행시킬 조건. deps에 특정값을 넣게 되면 컴포넌트가 마운트 될 때, 지정한 값이 업데이트될 때, useEffect를 실행. 1. Component가.. 2023. 3. 6. [react] #4 jsx, firebase연동 보호되어 있는 글 입니다. 2023. 2. 24. [react] #3 props 보호되어 있는 글 입니다. 2023. 2. 22. [react] #2 useState 보호되어 있는 글 입니다. 2023. 2. 21. [react] #1 리액트란? 보호되어 있는 글 입니다. 2023. 2. 20. [js] #5 정규표현식 보호되어 있는 글 입니다. 2023. 2. 15. 이전 1 2 다음
