728x90 분류 전체보기748 [TIL] 13일차 13일차 시간표 오전 9:00 ~ 오전 10:00 오리엔테이션 오전 10:00 ~ 오전 10:30 팀 회의 오전 10:00 ~ 오전 12:00 강의 수강 오후 12:00 ~ 오후 1:00 점심시간 오후 1:00 ~ 오후 6:00 강의 수강 오후 6:00 ~ 오후 6:30 팀 회의 오후 6:30 ~ 오후 7:00 저녁시간 오후 7:00 ~ 오후 10:00 강의 수강 오후 10:00 ~ 오후 10:30 하루 마무리 소감 리엑트는 재밌는 데 재밌지 않다. 새로 알게 되는 게 많아서 열심히 하고 있다. 너무 힘들어서 소감을 쓸 힘이 없다. 내일 남은 강의 듣기 전에 2강에 13, 14 다시 듣고 블로그에 추가 정리 하고 남은 강의 듣자.... 오늘은 끝 2021. 11. 15. 2주차 - 숙제 -> App.js import React from "react"; import logo from './logo.svg'; import './App.css'; import Start from "./Start"; function App() { const [name, setName] = React.useState("르탄이"); return ( ); } export default App; -> start.js import React from "react"; import img from "./scc_img01.png"; const Start = (props) => { console.log(props); return ( 나는 {props.name}에 대해 얼마나 알고 있을까? 시작하기 ); }; export def.. 2021. 11. 15. 2주차 - State 관리 1) 단방향 데이터 흐름이란? : 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 소리입니다. + 왜 단방향을 써야 하나요?? : 라이프 사이클과 함께 생각해보기 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어납니다. 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각해봅시다. 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 되겠죠? 앗..., 그럼 또 자식 컴포넌트가 리렌더링 될 거구요. 무한반복 렌더링이 일어나게 됩니다.!! 2) 클래스형 컴포넌트에서 state 관리 - setState() : 라이프 사이클을 볼 때 잠깐 봤던 setState()! 클래스형 컴포넌트의 state를 업데이트할 때 사용하는 함수입니다... 2021. 11. 15. 2주차 - Ref(리액트에서 돔요소를 가져오는 방법) Ref 만약에, 내가 어떤 인풋박스(input)에서 텍스트를 가져오고 싶으면 어떻게 접근해야할까요? DOM에서 다루는 방법은 1주차에 배웠는데, 리액트에선 어떻게 하면 좋을까요? (render()가 끝나고 가져오면 될까요? 아니면 mount가 끝나고? 아니, 그 전에 가상돔에서 가져오나? 아니면 DOM에서? 😖) → 답은, 리액트 요소에서 가져온다! 1) React 요소를 가지고 오는 방법 1 -> React.createRef() React.useRef() { const my_lists = list; const my_wrap = React.useRef(null); // null로 초깃값을 설정 해줌 console.log(my_wrap); // 콘솔로 확인해봐요! window.setTimeout(() =>.. 2021. 11. 15. 2주차 - CSS 1) CSS in React src폴더에 style.css 파일을 만들고 그 안에 스타일을 정의하고, 그 파일을 불러다 사용하는 방법이 있습니다. 2) styled-components 적용하기 - 패키지 설치하기 (프로젝트 경로 꼭 확인하고 설치 해야 함) yarn add styled-components - styled-components란? : 컴포넌트 스타일링 기법 중, 선생님이 가장 좋아하는 방식입니다! 왜 좋아하냐구요? 많은 이유가 있지만, 두 개만 꼽아볼게요. - class 이름 짓기에서 해방됩니다! - 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적입니다! import styled from 'styled-components'; import React from "react"; import Bu.. 2021. 11. 15. 2주차 - Component Component 1 - 클래스형 Component -> state, props Component는 클래스형과 함수형이 있습니다. 이제 클래스형 컴포넌트는 잘 쓰지 않지만, 우리는 두 가지를 모두 살펴볼거예요. → 왜냐하면 이미 개발된 프로젝트들(아마 여러분이 가야할 회사에서도...!)은 클래스형 컴포넌트를 사용 중일수도 있거든요. 최소한 코드를 알아보고 고칠 수 있을 정도는 알아두는 편이 좋습니다. 1) Component란? : 리액트는 레고이고, 컴포넌트는 블록입니다! - 웹 사이트를 조각내자! 컴포넌트를 이해하고 잘 써먹으려면 웹 사이트를 잘 조각낼 줄 알아야 합니다. 가령 우리가 아래와 같은 웹 사이트를 만든다고 생각해봅시다! ... ... ... ... 즉, 이 웹 사이트는, 크게 , , 세 개.. 2021. 11. 15. 2주차 - 가상돔, 라이프 사이클, 클래스 컴포넌트 1) 가상돔이란? -> 바뀐 부분만 진짜 DOM에 반영하는 것 -> 메모리에 올라가 있는 눈에 보이지 않는 가짜 DOM에 변경 사항을 전부 넣어서 바뀐 부분이 있는 확인하고 나면 마지막에 가상돔에서 진짜 돔으로 반영 되는 과정을 거친다.(진짜 DOM에는 한번만 반영된다.) : DOM은 html 단위(요소) 하나하나를 객체로 생각하는 모델입니다 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. DOM이 트리구조란 소리입니다. DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면? → 필요없는 연산이 너무 많이 일어난다! → 그래서 등장한 게 가상돔! 가상돔은 메모리 상에서 돌아가.. 2021. 11. 15. [React] 가상돔, 라이프 사이클, 클래스 컴포넌트 라이프 사이클 : 컴포넌트가 웹페이지에 들어갔다가 사라지기까지의 과정을 말한다. 1) 가상돔이란? -> 바뀐 부분만 진짜 DOM에 반영하는 것 -> 메모리에 올라가 있는 눈에 보이지 않는 가짜 DOM에 변경 사항을 전부 넣어서마지막에 진짜 DOM에는 한번만 반영하는 것 : DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다 예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. DOM이 트리구조란 소리입니다. DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면? → 필요없는 연산이 너무 많이 일어난다! → 그래서 등장한 게 가상돔! 가상돔은 메모리 상에서 돌아가는 가짜 D.. 2021. 11. 15. 1주차 - 숙제 오늘 할 일 추가하기 독서하기 완료 독서하기 완료 2021. 11. 15. 이전 1 ··· 63 64 65 66 67 68 69 ··· 84 다음 728x90
