코딩공부/React(29)
-
리액트 기초반 3주차(1)
Event Listner 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것입니다. 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰여요! 클래스형 컴포넌트 이벤트 리스너는 어디에 위치해야할까요? 클릭을 하건, 마우스를 올리건 DOM 요소가 있어야 이벤트가 발생하는 지 지켜볼 수 있겠죠? → 네! componentDidMount()에 넣어주면 됩니다. 이벤트는 꼭 컴포넌트가 사라지면 지워주세요! 이 과정을 clean up 이라고 불러요. 개발자 도구에서 확인했듯, 이벤트는 한번 등록되면 계속 남아있거든요! 그런데 컴포넌트가 사라지면요? 이벤트가 실행되지는 않겠지만, 남아는 있을거예요. 😢 그러니 깨끗하게 정돈해주는 과정이 필요합니다! 그게 c..
2022.02.01 -
리액트 기초반 2주차(2)
Ref 만약에, 내가 어떤 인풋박스에서 텍스트를 가져오고 싶으면 리액트 요소에서 가져와야한다. useRef()라는 리액트 훅을 사용해서 가져올 수 있다. import React from 'react'; import styled from "styled-components"; const BucketList = (props) => { console.log(props) const my_list = props.list_a; const my_wrap = React.useRef(null); // useRef()의 인자는 가장 초기값이다. console.log(my_wrap) // ref를 만들자마자 console을 찍었기때문에 null이 나온다 그 다음에 return이 된다. window.setTimeout(() =..
2022.01.31 -
리액트 기초반 2주차(1)
가상DOM DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 트리 구조 DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면 필요없는 연산이 너무 많이 일어납니다. 그래서 가상돔이 등장! 가상돔은 메모리 상에서 돌아가는 가짜 DOM입니다. 가상돔의 동작 방식: 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교해서 정말 바뀐 부분만 갈아끼워줍니다! → 돔 업데이트 처리가 정말 간결하죠! 진짜 DOM을 새로 그리는 시점 - 처음 페이지 진입했을 때도 그리겠죠! - 데이터가 변했을 때도 그릴 겁니다! 라이프 사이클 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이에요. 컴포넌트는 생성(..
2022.01.29 -
리액트 기초반 1주차(3)
JSX 규칙 1. 태그는 꼭 닫아주기 2. 무조건 1개의 엘리먼트를 반환하기 - 2개여도 안되고 0개여도 안됨(반환값 없으면 null) 3. JSX에서 javascript 값을 가져오려면 {} 중괄호 안에 변수명을 넣어주면 된다. * 리턴안에서는 if문을 쓸 수가 없고 삼항연산자는 쓸 수 있다. 4. class이름을 지정할 때 class대신 className을 쓴다. 5. 인라인으로 style 주기 style도 객체 즉, dictionary로 넘겨줘야한다. // 중괄호를 두 번 쓰는 이유? 딕셔너리{key: value}도 자바스크립트니까요! // 이렇게 쓰거나, orange //혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요! function App() { const styles = { color: ..
2022.01.28 -
코딩앙마 React JS state, useState
State : 컴포넌트가 가지고 있는 속성값 속성값이 변하면 react는 자동으로 속성값을 업데이트 시켜준다 개발자는 state만 잘 관리하면 화면을 다시 그릴 필요가 없어서 편리하다! export default function Hello() { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; console.log(name); } return ( State {name} Change {/* 버튼을 눌러도 변화가 없다 */} ); } 이름은 바뀌는데 {name} 부분이 업데이트가 안된다 위에 선언된 let name은 state가 아니고 단순히 변수이기 때문이다 이 컴포넌트가 관리하고있는 상태값이 아니다. ..
2022.01.25 -
코딩앙마 React Js 이벤트 처리
이벤트를 거는 방법 1. 미리 함수를 하나 만들어놓고 전달해주는 것 export default function Hello() { function showName() { console.log("Mike"); } return ( Hello Show name // 여기에 showName()을 넣어주면 showName이 반환하는 값을 가져오는데 // 지금은 반환하는 값이 없으니까 undefined가 들어가게 된다. // 함수명만 적어주면 기능만 실행해줌! Show age ); } 2. onClick 이벤트 내부에 직접 함수를 작성 { console.log(30); } }>Show age 장점 : 매개변수를 전달하기 편하다 export default function Hello() { function showNam..
2022.01.24