안녕하세요

1. state란 무엇인가? state는 컴포넌트가 갖는 값이 계속 바뀌는 동적인 데이터이고, 상태를 바꾸는 관리는 useState로 합니다. 2. props란? props는 부모에서 컴포넌트에 전달한 값입니다. 그러면 props는 Counter 컴포넌트 안에서 const Counter = (props) => { console.log(props) // 출력결과는 객체로 전달됩니다. // {a: 1, initialValue: 5} 하지만 전달하는 값이 많아지면 객체에 담아서 전달합니다. const counterProps = { a: 1, b: 2, c: 3, d: 4, e: 5, initialValue: 5, }; 객체는 스프레드 연산자로 펼쳐서 전달합니다. Counter.defaultProps 로 오류를..

컴포넌트로 컴포넌트를 감싸는 방법입니다. 컴포넌트로 컴포넌트를 감싸려면 children을 props로 주고 나서 children을 원하는 태그로 감싸주면 됩니다. import React from "react"; const Wrapper = ({ children }) => { return ( {children} ); }; export default Wrapper; 그리고 App.js에서 Wrapper 컴포넌트로 감싸면 됩니다. return ( ); cookie 이벤트로 팝업 창에 오늘 하루 열지 않기 기능을 구현합니다. const Popup = () => { const [TG, setTG] = useState(); return ( // TG가 true라면 Pop에 'on'을 붙이도록 합니다. Popup {..

리액트로 유튜브 동영상 전환 기능 만들기 1. react-youtube를 설치합니다. npm install react-youtube 2. 유튜브 모듈을 import 합니다. import YouTube from "react-youtube"; 3. 동영상을 만듭니다. const opts = { height: '100%', width: '100%', playerVars: { autoplay: 0, loop: 1, controls: 0, showinfo: 0, rel: 0, mute: 1, paused: 1, }, }; 4. 유튜브 영상에 ref를 주고, url을 변수로 만듭니다. const Promotion = () => { const MOVIE = useRef(); const [url, setUrl] = u..

1. JavaScript 싱글스레드 작업 수행 방식 코드가 작성된 순서대로 한 번에 하나의 작업을 실행합니다. 이를 동기 방식의 처리라고 부릅니다. A(1초) B(10초) C(15초) 의 작업이 있다면 C를 처리하기까지 걸리는 시간은 15초만을 기다리는 것이 아니라 A -> B -> C 순서대로 결과를 다 가져온 뒤에 C를 처리하여 A+B+C 총 26초를 기다리게 됩니다. 2. 비동기 작업 수행 방식 동기 방식의 처리의 단점을 극복하기 위해서 여러 개의 작업을 동시에 실행시킵니다. 작성된 코드의 "결과를 기다리지 않고" 다음 코드를 바로 실행합니다. 그리고 작업이 끝나게 되면 그 때 결과를 나타나도록 합니다. func A setTimeout 1초 (cosnole.log(A 작업 끝)) func B set..