Front-end Dev./React
-
코드팟 리액트 - 퀴즈 앱 만들기(1)Front-end Dev./React 2022. 2. 4. 14:32
코드팟 리액트 - 간단한 퀴즈 앱 만들기 1. 퀴즈 컴포넌트 만들기 App 컴포넌트 만들기 Class 추가 CSS 입히기 2. 버튼 컴포넌트 만들기 + 이벤트 다루는 법 이벤트 명에 캐멀케이스(camelCase)를 사용 함수 자체를 이벤트 핸들러에 전달해줘야 함 HTML에서 이벤트 처리 Hello World 리액트에서 이벤트 처리 Hello World 2-1. 퀴즈에 이벤트 연결하기 App 컴포넌트 내부에 handleClick 함수 만듦 handleClick 함수를 button에 연결 발생한 이벤트 값 가져오기 ( 정답 오답 기능 추가) value 값 추가 Hello World 이벤트 핸들링 함수에서 event 받기 : 리액트에서 이벤트 핸들러에 함수를 연결하면 함수의 첫 번째 인자로 event 객체를 ..
-
React - 이미지 태그 추가Front-end Dev./React 2022. 2. 4. 01:45
React에서 이미지 태그를 넣는 방법 React에서 이미지 태그를 추가할 경우, scr 속성에 HTML에서 사용하듯 파일 경로를 넣으면 작동하지 않는다. 그렇다면 리액트에서는 이미지를 어떻게 넣을 수 있을까? 어스 프로젝트를 리액트로 진행하면서 이에 관련해서 알게 된 부분, 고민을 해결한 부분을 정리해보려고 한다. 방법 1. 이미지를 import 한 후, 해당 변수를 img 태그 src에 넣어준다. 선언한 변수를 JSX에서 {}로 감싸서 사용한다. import cover from "이미지 경로/cover.jpg"; ... ; ... Navigation 컴포넌트 내에 아이콘 이미지를 import로 불러오면서 코드가 지저분해졌다. ( action 속성에 들어가는 아이콘 이미지도 있어서 더 길어짐) 이렇게 ..