월화수 추석연휴라 본가로 내려가 정신없이 보냈다.
시골도 다녀오고 제사준비도 하고 집 대청소까지하고 몸살 날 것 같았움
내 계획은 못잤던 잠 몰아서 푹 자기였는데 실패했다 ㅠㅠㅠㅠㅠ
다음주 일요일엔 꼭! 기필고! 늦잠을 자고 말리라
그나저나 연휴동안 항해99쉬는날이라 마음을 좀 내려놔야지 했지만 왜이렇게 마음이 불편한건지!!!
게더 들어가니 연휴동안 강의 열심히 듣는사람 꽤 많아서 마음이 더 그랬던것 같다. 나만 뒤쳐지는것 같아섴ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
결국 아무것도 안하면 안될 것 같아서 조금이라도 공부하려고 친구들이랑 만나기로 한 약속 전부 취소하고 집에서 강의 들었다. 내년 설에 보자 얘들아^.ㅜ
리액트로 주특기를 정하고 팀발표가 났는데 내가 팀장이네?ㅎㅎㅎㅎㅎㅎㅎㅎㅎOMG
그래도 이번엔 개인과제로 진행되는거라 오전9시, 오후9시 "다들...진도 잘 나가고 계신가요?" 요정도만 하면 돼서 편하게 하는중이다 ㅋㅋㅋ
다들 알아서 잘하는 분들이라 굳이 쪼으지 않아도 진도가 술술 나가고 계시더라
내가 제일 뒤쳐지고있다.... 역시 나만 잘하면 된다^^^^^^^^
이놈의 벼락치기 인생. 똥줄 안타니 너무 진도가 안나간다ㅋㅋㅋㅋㅋㅋㅋ 잘좀하자 제발
리액트 러닝커브가 높다고 여러번 듣긴했지만 이정도일 줄이야
이건 뭐... 쇠귀에 경읽기다. 강의 듣는데 무슨말인지 1도 모르겠구요?
아니 심지어 10분짜리 강의라고 해놓고 막상 클릭해서 들어가면 40분짜리고!!! 나를 막 농락하네(?)
강의 다섯번 돌려봤는데도 이해안되는거면 내 머리는 bbak대가리인걸까ㅋ.ㅋ
bbak치는 마음 꾹꾹 눌러가며 그래도 과제진행하고 있다.
제출은 수요일까지지만 목표는 화요일까지 끝내기!! 할 쑤 있 똬!!
한주의 배움
- yarn으로 CRA 설치하기
감격스러운 첫 프로젝트 생성. 이제 나도 리액트 한다!!!!(쩌렁쩌렁)
yarn create react-app 리액트 프로젝트 이름
*주의! 프로젝트를 만드는 폴더 경로 확인하고 입력하기!
- DOM(Document Object Model 문서객체모델)
DOM은 html 단위 하나하나를 객체로 생각하는 모델이다. 예를 들어, 'div'라는 객체에 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있을 수 있는데 이런 구조를 트리 구조라고 한다.
즉, DOM = 트리구조
- JSX
리액트에서는 딱 하나의 html 파일만 존재한다. (public 폴더 아래에 있는 index.html)
그렇다면 리액트에서 어떻게 뷰를 그릴수 있을까?
App.js 파일에서 보이듯, JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다.
그럼 JSX에서 쓰는 '
정확히는 React 요소이다!
- JSX의 규칙
- 태그는 꼭 닫아주기
- 무조건 1개의 엘리먼트를 반환하기
- JSX에서 javascript 값을 가져오려면 중괄호를 쓴다.{}
- class 대신 className!
- 인라인으로 style 주기
(예시 : style={{color: 'orange', fontSize: '20px'}} )
- 컴포넌트란?
프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.
클래스형과 함수형이 존재하며, 현재는 함수형을 많이 사용한다.
- 라이프 사이클이란?
컴포넌트의 라이프 사이클(= 컴포넌트 생명주기)은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이다. (생성 → 수정(업데이트) → 삭제)
생성은 처음으로 컴포넌트를 불러오는 단계
수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 된다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
- 또는, 강제로 업데이트 했을 경우 (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있다.)
삭제는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계이다.
- State 란?
state는 Component가 가지고 있는 데이터이다.
state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터이다.
생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄진다. 내꺼이기때문에 생성도 수정도 자유롭다.
- Props란?
props(“properties”의 줄임말)는 Component가 부모 Component로부터 받아온 데이터를 말한다.
Props로 받은 데이터는 수정할 수 없다. 남의 것이기 때문
- State와 Props의 차이점
두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다.
props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다.
- styled-components란?
Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.
styled-coponents 는 styled-components 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으며, Javascript 코드 내에서 일반 CSS로 구성 요소의 스타일을 지정할 수 있다.
- scss 문법 : nesting
내가 포함하고 있는 요소에 접근할 수 있다.
ex)
&는 나 자신을 뜻하며 &:로 적용 할 수 있다.
- Ref란?
React에서는 DOM 요소를 직접적으로 사용하지 않기 때문에 React에서 다른 리액트의 요소에 접근하고 싶을 때는 Ref를 사용하면 된다.
Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공해준다.
아래의 공식문서에서 Ref에 대해 자세하게 살펴볼 수 있다.https://ko.reactjs.org/docs/refs-and-the-dom.html
- Ref와 DOM
Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.
일반적인 React의 데이터 플로우에서 props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단이다.
자식을 수정하려면 새로운 props를 전달하여 자식을 다시 렌더링해야 한다. 그러나, 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우도 가끔 있다. 수정할 자식은 React 컴포넌트의 인스턴스일 수도 있고, DOM 엘리먼트일 수도 있다. React는 두 경우 모두를 위한 해결책을 제공한다.
- Ref를 사용해야 할 때
- 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
- 애니메이션을 직접적으로 실행시킬 때.
- 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양해야한다.
- Ref 생성하기
Ref는 React.createRef()를 통해 생성되고 ref 어트리뷰트를 통해 React 엘리먼트에 부착된다.
보통, 컴포넌트의 인스턴스가 생성될 때 Ref를 프로퍼티로서 추가하고, 그럼으로서 컴포넌트의 인스턴스의 어느 곳에서도 Ref에 접근할 수 있게한다.
- 서버리스
서버리스(serverless)란 개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델이다.
부족한 부분
이해가 안되는 부분을 계속 붙잡고 있는건 삽질이나 마찬가지이다.
안되는 부분은 과감하게 스킵하고 다음단계를 배운 뒤 다시 돌아와 이해하면 깨닫는 속도가 빨라진다.
아직 리액트에 대한 개념과 문법이 많이 부족한데 프로젝트를 통해 직접 사용하면서 부족한 부분을 채워가야겠다.
다음주 해야 할 것
리액트 개인과제 화요일까지 끝내기
리액트 부족한 기본기 다지기
