본문 바로가기

전체 글74

React 공부 - 6일차 React LifeCycle 순서 class -> constructor -> render -> ref -> componentDidMount (setState/props 바뀔 때) -> shouldComponentUpdate(true) -> render -> componentDidUpdate() 부모가 자식 컴포넌트 없앴을 때 -> componentWillUnmount() -> 소멸 react가 dom 에 표시할 때 특정한 동작을 할 수 있음 render 가 처음 성공적으로 실행 됬다면 componentDidMount 실행 됨. setState같은 것으로로 리렌더링 일어날 때는 componentDidMonut 실행 안됨 componentDidMount() { } 컴포넌트 첫 렌더링 된 후 -> 비동기 요청.. 2021. 3. 1.
React 공부 - 5일차 부모로부터 받은 props는 자식에서 바꾸면 안 됨 props.hi = 'hello'; 이런 식으로 바꾸면 안 됨. props를 바꿀 경우가 있는데, props를 바꿀 경우에는 state로 만든 뒤에 그 state를 변경한다 Ex) const [hi, setHi] = useState(props.hi); setHi('hello'); props를 자식이 바꿔버리면 부모가 물려준 것도 바뀌어야 하는데, 자식이 부모 꺼를 바꿔버리면 뜻하지 않게 바뀌어버림 함수로 하는 경우에는 정밀한 동작이 필요한 경우 기본 객체로는 안 되는 동작들이 있을 때, ex) constructor , ref 함수, setState 함수 A component -> B component -> C component 부모 - 자식 - 자손 p.. 2021. 2. 28.
React 공부 - 4일차 (성능 개선) 렌더링이 될 때, state 나 props 변경되었을 때 렌더링 된다. 렌더링 되는 것을 확인하려면 , React Developer Tools을 다운로드하면 된다. 다운로드하고, F12를 눌러 개발자 환경에 들어가 화살표 표시를 클릭하면, Components 탭과 Profiler 탭이 생긴다. Components 탭에 들어가면 위와 같이, Component , props, state, 사용하는 react 버전을 확인할 수 있다. 빨간 동그라미가 쳐진 톱니바퀴를 클릭해, 설정으로 들어간다. 그럼 이렇게, 컴포넌트가 렌더링 됐을 때, 강조 표시를 주는 설정이 있다. 이걸 체크하고 , 설정 탭을 닫는다. import React, { Component } from 'react' class RenderTest e.. 2021. 2. 28.
리액트 공부 3일차 - 2 import vs require require - node의 module 시스템 파일에서 module.exports에 넣어주면, 다른 파일에서 require 해서 불러올수 있다. import { Component } from 'react' ; export const hello = 'hello'; // import { hello } 변수명 다르면 개수 상관 X export default number; // import number; defalut는 한번만 불러 올 수 있음. // module.exports != export default 두개는 다른 것이긴 한데, React에서는 호환된다고 생각해도 무방 react에서는 import, export 씀 node에서는 require 씀 node에서는 impor.. 2021. 2. 23.
리액트 공부 - 3일차 전에 만들었던 구구단을 webpack으로 빌드할 것이다. 1. npm init 으로 package.json을 만들어 준다. 2. babel-loader , @babel/core 등 필요한 모듈들을 설치해준다. ( npm i -D로 개발용으로 설치 ) 3. webpack.config.js 에 웹팩을 어떻게 빌드할 것인지 작성해준다. 4. 작성했던 js 파일을 jsx 파일로 옮겨준다. ( node module system (require)을 사용 ) 5. npx webpack | npm run 명령어로 빌드 6. index.html 만들어서 실행하기 webpack.config.js 구성요소 간단 정리 1. Entry : 시작하는 파일들 2. Output : 결과가 어떻게 될지 3. Loaders(module.. 2021. 2. 23.
리액트 공부 - 2일차 Class Component VS Hooks Component JSX 에서 HTML 속성 class 는 못쓰고, className 으로 써야함. label의 속성 for은 htmlFor로 써야함. hooks에서 state를 class Component같이 한꺼번에 안쓰는 이유 setState에서 일일이 state 하나하나를 모두 바꿔줘야 해서 hooks에서는 state는 나누어서 작성함. (Javascript 구조 분해 할당 표현식으로 선언) ex) const [val,setVal] = React.useState('초기값'); webpack - 개발 실제로 할 때, 컴포넌트 여러 개 합쳐서 하나의 스크립트 파일로 만들어주는 것 create-react-app 쓰기 전, 세팅을 해보면서 이 세팅을 자동화 해.. 2021. 2. 22.
리액트 공부 - 1일차 소문자로 시작한다 - html 태그 대문자로 시작한다 - Component JS 파일에서 JSX (JS + XML)를 쓰기위해선 babel 을 써야한다 JSX 에서 단일 태그는 항상 닫아 주어야 한다. state - 변할 수 있는 값이나 변하게 될 여지가 있는 값 ( 컴포넌트 ) state 변경 시킬 때는 항상 setState() 메소드 이용 ex) input 태그의 value 값이 state인 경우에 onChange 이벤트를 이용, 리턴 값으로 setState() 메소드를 이용해 변경해 주어야 한다. this.setState({ value: e.target.value})} /> 내가 만든 클래스 메소드는 화살표 함수를 쓰자. 일반 함수를 사용하려면 this.function = this.function... 2021. 2. 19.
React 공부 시작 드디어 미루고 미루던 React 공부를 시작하려 한다. 개인적인 차이겠지만 나는 책 또는 공식 문서를 읽으면서 공부 하는 것이 더 잘된다고 느꼈기 때문에 책을 구입했다. github 에 TIL 도 열심히 해볼 예정이다. 화이팅! 2021. 2. 14.
Document 객체 Document는 html에 대한 객체라고 하였다. 자주 쓰이는 것만 집어 보고 넘어가려고 한다. document.getElementById(아이디) html에서 해당 아이디를 가진 태그를 선택한다. document.getElementsByClassName(클래스), document.getElementsByName(이름), document.getElementsByTagName(태그) 클래스, 네임, 태그명을 가진 태그를 선택한다. 여러개가 선택되어 배열으로 리턴된다. 메소드 이름에도 s가 붙어있다. document.querySelector(선택자), document.querySelectorAll(선택자) css 선택자로 선택할 수 잇게 해준다. 아이디는 #, 클래스는 . 태그명[속성명=속성값] 같은 것도.. 2020. 8. 11.

티스토리툴바