080924 til react

리액트란 ? 

 

웹사이트나 앱을 만들 . 떄쓴다 

 

웹싸이트는 html , css ,js 를사용하는데 

 

리액트는 js 를 . 더 쉽게 쓸수 있도록 도와준다 

 

---

컴포넌트 

component 

 

웹싸이트를 만드는데 필요한 작은 블록 

 

버튼 ,이미지 ,텍스트 상자 를 컴포넌트라고생각하면됨 

 

버튼 컴포넌트 - "버튼" 이라는 블록 

텍스트 상자 컴포넌트 - "텍스트" 라는 블록 

 

---

state  상태? 

 

컴포넌트가 가지고 있는 정보 

컴포넌트의 상태를 사용해서 현재 어떤 . 정보를 가지고 있는 지. 알수있음 

게임 에서 점수를 저장 하는것 이라고생각 하면됨 .

 

버튼이 눌렸는지 기억하는 상태 

텍스트 상자에 입력된 내용을 저장하는 상태 

---

props 속성

 

컴포넌트에 정보를 주는 방법

컴포넌트를 만들때 필요한 정보를 전달해줘야 할때 사용함 

 

버튼컴포넌트에 글자 라는 속성을 주면 , 버튼에 글자가 나타남 

텍스트상자에 초기값 이라는 속성을 주면, 텍스트 상자에 . 그값이 기본으로 표시됨 

 

---

rendering 렌더링

컴포넌트를 화면에 보여주는 과정 

 

컴포넌트가 화면에 어떻게 보여질지 결정 . 

 

버튼 컴포넌트를 렌드링 하면 버튼이 화면에 보이게 됨 

텍스트상자 컴포넌트를 렌더링 하면 텍스트상자가 화면에 보이게됨 

---

dom &virtual dom 

 

dom (document object mode) 

웹 페이지를 만드는 html 구조를 나타내는 모델 

웹페이지의 모든 요소가 어떻게 배치되는지 정의 

 

virtual dom

리액트가 사용하는 특별한 dom 모델 

실제 돔을 수정 하기 전에 메모리에 서 virtual dom 을 사용해서 

변경사항을 미리 계산 하고 실제 dom 에서 필요한 부분 만 빠르게 업댓함 

 

---

 

refactoring 리펙토링 

 

코드를 . 더깔끔하고 이해하기 쉽게 만드는 과정 

코드를 수정하지 않고도 기능을 개선 ,더 . 잘작동하도록 만듬 

 

여러개의 비슷한 컴포넌트를 하나로 합치는 작업 

 

---

오늘 2.주차 강의를 . 다들었다 

 

듣고도 잘 이해가가지 않아서 

 

다른 강의를 보면서 ,책이랑 보면서 

 

알아가는 중이다 

 

일단 리액트 초기 세팅은 끝냇고 

 

주말에 과제를 시작해볼까 한다 

 

뭔가 알것같으면서도 어려운 이느낌 ... 

 

이번 과제도 잘 . 할수있을 . 까라는 생각 뿐 ...

 

조금 . 더 찾아보고 ,직접 쳐보면서 리엑트를 읽혀야겟다 .