728x90 반응형 javascript 프레임워크6 다시 시작하는 리액트 - 리액트 실무 기초 3 3-1. Event Listener - 이벤트 리스너 : 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것. ( 대표적 : 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등 ) 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번에는 addEventListener를 통해 추가해볼 거임. 동그라미 안에 텍스트를 한 줄 넣고 텍스트를 넣어줄 건데 동그라미에 마우스를 올렸을 때 동그라미의 색이 변하고, 텍스트에 마우스를 올렸을 때 텍스의 색이 변하도록 할 거임. - App.js import React from "react"; import styled from "styled-components"; import Text from "./Text"; const Wrap = st.. 2023. 3. 29. 다시 시작하는 리액트 - 리액트 실무 기초 2 과제 아래 기획서를 보고, 퀴즈 시작하기 화면을 만들어보세요! 아래에 라는 자식 컴포넌트를 만들어서 해봅시다! → 숙제할 때는 꼭꼭 클래스형 컴포넌트를 쓸 필요 없어요! (해설 코드는 함수형 컴포넌트로 나갑니다.)우리가 배운 내용으로 위 페이지를 만들어봅시다. 이미지도 넣어보고, 내 친구가 이름을 넣을 텍스트 입력 인풋과 시작하기 버튼을 만들어요. [나는 {} 에 대해서...]부분에 {}는 state에 넣고 prop로 넘겨서 해보세요! - 기획서(레이아웃) 보기 - 내 과제물 다 하고나서 생각해보니까 난 prop으로 넘기지 않았다 ㅋ ㅋ ㅋ ㅋ ㅋ ㅋ... App.js에서 useState를 만들어두고 prop하는게 인상적이지만 그냥 Start component에서 모든걸 해결했다...:) 근데 과제 리뷰를 보.. 2023. 3. 29. 다시 시작하는 리액트 - 리액트 실무 기초 2 2-1. 라이프 사이클 공부 후 업데이트 2-2. Ref Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공함. - 주로 Ref를 사용할 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. - Ref 생성하기 Ref는 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착됨. 보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref에 접근할 수 있게 함. class MyComponent extends React.Component { cons.. 2023. 3. 27. 이전 1 2 다음 728x90 반응형
