● 오늘 공부한 것 반딧불반 숙제(의사코드 작성) App.js *ToDo : React Router Dom 설치 후, BrowserRouter, Routes, Route 컴포넌트를 적절히 사용합니다. 먼저 index.js 에서 를 import 해온 뒤, 컴포넌트를 감싸준다. App.js에서 태그를 열어주고, 컴포넌트 3개(Tweets, About, Mypage)를 불러온뒤, 컴포넌트를 3개 만들어준다.
분류 전체보기
● 라이프사이클 메서드의 이해 라이프사이클은 크게 세 가지, 마운트, 업데이트, 언마운트 카테고리로 나눕니다. 우선 어떤 것들이 있는지 간단히 알아보고 큰 흐름을 이해한 후 하나씩 살펴보는 것으로 하자. 마운트 : DOM이 생성되고, 브라우저 사엥 나타나는 것을 마운트라고 한다. constructor getDerivedStateFromProps (derived from: ~에서 파생되다.) render componentDidMount 업데이트 : 컴포넌트는 다음과 같이 4가지 경우에 업데이트된다. props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 리렌더링될 때, this.forceUpdate로 강제로 렌더링 될 때 getDerivedStateFromProps shouldComponentUpd..
문제설명 3x 마을 사람들은 3을 저주의 숫자라고 생각하기 때문에 3의 배수와 숫자 3을 사용하지 않습니다. 3x 마을 사람들의 숫자는 다음과 같습니다. 10진법3x 마을에서 쓰는 숫자10진법3x 마을에서 쓰는 숫자 10진법 3x마을에서 쓰는 숫자 10진법 3x마을에서 쓰는 숫자 1 1 6 8 2 2 7 10 3 4 8 11 4 5 9 14 5 7 10 16 정수 n이 매개변수로 주어질 때, n을 3x 마을에서 사용하는 숫자로 바꿔 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ n ≤ 100 입출력 예 nresult n result 15 25 40 76 입출력 예 설명 입출력 예 #1 15를 3x 마을의 숫자로 변환하면 25입니다. 입출력 예 #2 40을 3x 마을의 숫자로 변환..
● 오늘 공부한 것 state props에 대해 배웠다. props는 불변한 값을 말한다. state는 변할 수 있는 값을 말한다. props는 단방향 으로 이동한다. [3장 컴포넌트] 리액트에서 컴포넌트는 함수형 컴포넌트와, 클래스형 컴포넌트로 나눌 수 있다. 클래스형 컴포넌트에서는 state 기능, 라이프사이클 API 기능을 사용할 수 있습니다. 함수형에서는 state와 라이프 ddaeunbb.tistory.com state props에 대해 배웠다. ● 내가 놓치고 있던 것 props는 객체로 전달된다. const copy = {name : 'daeun'} useState를 const 로 지정하는 이유는 직접적인 수정을 불가능하게 하기 위해서 이다. 직접적으로 수정하게 된다면, 상태변경을 모르기 ..
● ref는 어떤 상황에 사용해야할까? 직접적으로 DOM을 다뤄야할 때 사용해야한다. (즉 DOM을 참조해야할 때) 컴포넌트 인스턴스에 대한 참조를 해야할 때 컴포넌트 간의 참조를 공유해야할 때 사용한다. 왜 쓰는지에 대한 이유와, 실제 ref라는 것이 JavaScript에서 어떤 기능을 대체한 것인지에 대해서 생각해보니, 우리는 HTML에서 직접적으로 id를 추가해주고, 그 id를 가진 DOM 요소를 조작했었는데, 리액트에서는 그런 기능을 권장하지 않는다. 왜냐하면 리액트의 virtual DOM을 우회하는 것이기 때문에 권장하지 않는다는 것이다. 어차피 DOM 요소가 변한 부분이 있다면 virtual DOM으로 비교해서 필요한 부분만 렌더링 해주는데, 직접적으로 접근한다면 불필요한 렌더링이 생길 수 있..
● 리액트의 이벤트 시스템 ⚬ 이벤트 사용시 주의할 점 이벤트 이름은 카멜 표기법으로 작성한다. onClick, onChange, onKeyUp••• 이벤트에는 함수 형태의 값을 전달한다. onClick={ ( ••• )=>{ ••• } } DOM 요소에만 이벤트를 설정할 수 있다. 컴포넌트에는 이벤트를 달 수 없다. 이렇게 적으면 onClick인 props 를 전달해주는 것임 ⚬ 이벤트 종류 Clipboard Composition keyboard Focus Form Mouse Selection Touch UI Wheel Media Image Animation Transition ● onChange 이벤트 실습하기 ⚬ 클래스 컴포넌트 실습 import { Component } from "react"; ..
