📖오늘 배운 것 new Image : 새로운 HTMLImageElement 인스턴스를 만든다. document.createElement('img')와 동일하게 작동한다. 이벤트 핸들러 onAbort: 사용자가 이미지 로딩을 중간에 멈출 때 발생하는 이벤트 onError: 이미지 로딩 중 에러가 발생했을 때 onLoad: 이미지가 성공적으로 로딩되었을 때 const [loaded, setLoaded] = useState(false); useEffect(() => { const image = new Image(); image.src = src; image.onload = () => setLoaded(true); }, [src]); Array.from :유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운..
함수의 리턴 값은 언제나 하나! 리액트에서 정의한 함수의 return 내에는 오직 하나의 최상위 태그만 존재해야 한다. export default function Test (){ return( Hello, world! React ) } 그래서 이렇게 의미가 없는 로 감싸는 경우가 많다. 하지만 로 감싸면 태그 자체는 사용하지 않지만 DOM에는 div가 적용된다. 따라서 이럴 때 사용할 수 있는 것이 Fragment이다. Fragment 사용하기 import React, { Fragment } from 'react'; export default function Test (){ return( Hello, world! React ) } 이렇게 가 아닌 를 사용하는 경우 DOM에 영향을 미치지 않는다! 그리고 ..
코딩앙마님의 강의를 보고 작성한 글입니다. https://www.youtube.com/watch?v=ymmiuSl1t5k&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=16 PUT 현재 단어를 완료했다는 의미로 체크를 하면 회색으로 표시되도록 하였는데 아직 새로고침을 하거나 나갔다 들어오면 초기값으로 변경되어 있다. 그래서 저장되어 있는 데이터의 isDone 상태를 바꾸기 위해 PUT 메소드를 사용할 것이다. Word 컴포넌트의 toggleDone 함수를 수정해보자. //Word.js function toggleDone(){ fetch(`http://localhost:3001/words/${word.id}`, { method : 'PUT', headers : { 'co..
https://yj-zero.tistory.com/86 React #8 [json, 리액트 라우터] 코딩앙마님의 강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=vI-XtN_Zdfg&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=10 본격적인 페이지 만들기 이제 페이지를 만들기 위해 불필요한 파일.. yj-zero.tistory.com 이전 글의 내용에서 이어집니다. 코딩앙마님의 강의를 보고 정리한 내용입니다. https://www.youtube.com/watch?v=B70lI2PvRnA&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=13 이제 단어 목록에서 뜻 보기, 숨기기, 삭제, 체크박스를..
코딩앙마님의 강의를 보고 정리한 글입니다. https://www.youtube.com/watch?v=vI-XtN_Zdfg&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=10 본격적인 페이지 만들기 이제 페이지를 만들기 위해 불필요한 파일들을 다 삭제해준 후 먼저 토익 영단어 앱을 만들기 위해 먼저 헤더를 만들어준다. export default function Header() { return ( 토익 영단어(고급) 단어 추가 Day 추가 ); } 그다음 App 컴포넌트에서 연결해주면 이렇게 뜬다. 이제 이 밑에 day 별로 영단어를 확인할 수 있도록 해야 하는데 그러기 위해선 day별 영단어를 json으로 더미 데이터를 구현해야 한다. 이런 식으로! 데이터는 코딩앙마님의..
코딩앙마님의 리액트 강의를 보고 정리한 내용입니다. https://www.youtube.com/watch?v=DuJC2ATdGtw&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=8 create-react-app 기본 폴더 설명 node_modules 폴더는 이 프로젝트를 실행할 때 사용되는 dependencies 모듈들이 모여있는 것이다. 여기에 설치되어 있는 내용들은 package.json 파일에 기록되어 있다. 이 폴더가 없으면 프로젝트를 진행할 수 없는데, 폴더가 없는 경우 npm install을 하면 그대로 다시 설치할 수 있다. 그래서 이 폴더는 내용도 많고 무겁기 때문에 깃에 올리지 않는다. 하지만 package.json에 내용이 기록되어 있기 때문에 다른 ..
update form 요소가 있는 CreateContent를 복사해서 UpdateContent로 만들어준다. article이 mode에 따라 바뀌는 부분이 길어서 코드가 지저분해 보이기 때문에 render밖으로 getContent라는 함수로 만들어준다. getContent(){ let _title, _desc, _article = null; if(this.state.mode === 'welcome'){ ... } _article = } else if(this.state.mode === 'create'){ ... }.bind(this)}> } else if(this.state.mode === 'update'){ ... }.bind(this)}> } return _article; } 그리고 _article을..
props와 state의 차이점 props는 read-only이지만 state는 setState를 통해서 수정이 가능하다. 예를 들어, 현재 Content라는 컴포넌트를 사용하는 APP.js 에서는 title이라는 props를 통해 값을 주입할 수 있다. 하지만 Content 내부에서 title 값을 hi로 바꾸려고 하면 에러가 발생하게 된다. 이렇게 컴포넌트 안에서 자신에게 전달된 props 값을 바꾸는 것은 금지되어있다! 컴포넌트 밖에서만 props를 바꾸는 것이 허용되기 때문에 props가 수정할 수 없는 read-only라는 것! props와 이벤트 위에 있는 동그라미는 상위 컴포넌트, 아래 동그라미는 하위 컴포넌트이다. 지금까지 만든 컴포넌트로 따지면 상위 컴포넌트는 App.js, 하위 컴포넌트..
props, state, event 3개가 서로 상호작용하며 애플리케이션의 역동성을 만든다. !목표! WEB을 누르면 welcome 메시지가, 각 목차를 누르면 그에 해당하는 내용이 뜨도록 만들 것이다. 그래서 우리는 각 링크에 이벤트를 만들 것이다. 그 이벤트를 클릭하면 App 컴포넌트의 state가 바뀌고 그 바뀐 state가 Content 컴포넌트에 동적으로 전달되도록 하는 것이 목표! 코드 변경 전 전체 코드↓ 더보기 https://github.com/YJZero/React/tree/main/components state 설정하기 지금 보고 있는 페이지가 welcome 페이지인지 read(읽기) 페이지인지 구분하기 위해 mode를 추가한다. 그리고 mode가 welcome일 때 content 영역..
컴포넌트 만들기 WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 이러한 순수 html 코드가 있다. 이 부분들을 컴포넌트를 만들어서 리액트로 구현해보자. WEB world wide web! 먼저 이 헤더 부분을 리액트를 통해 subject라는 이름의 컴포넌트로 바꿀 것이다. =Subject라는 컴포넌트를 만들겠다. 컴포넌트의 이름의 첫글자는 무조건 대문자! 그게 룰임!! 그 다음 render 함수를 만들고 (class 안에서 함수를 만들 땐 function을 안 붙여도 된다.) return(); 을 쓴 후 이 괄호 안에 원하는 내용을 넣는다. 이때! 컴포넌트는 무조건 하나의 최상위 태그만 있어야 한다. ..
