44일차(1)/React(5) : React 저장소 clone하기 / React 코드 리뷰

44일차(1)/React(5) : React 저장소 clone하기 / React 코드 리뷰

 

 

- 어떤 어플리케이션이 항상 GUI가 있는 것은 아니다.

- 화면상에 나타나진 않지만 백그라운드에서 동작하고 있는 프로그램도 많다.

- gui가 없는 프로그램들은 보통 명령프롬프트에서 실행된다.

 

- 명령 프롬프트에서 사용하는 cd 도 사실 응용프로그램이다. 기본으로 어디서나 접근 가능한 프로그램!

 

- React 작업을 위한 기본 라이브러리들이 들어있는 패키지들

- 이건 어디에 설치되어 있는지? → 글로벌이 아니라 basic 폴더 안에만 있다.

 

- json파일에는 어떤 패키지가 필요한지에 대한 목록만 들어있는 것이다.

- 실제로 저 파일들이 설치된 폴더는 node_modules! (해당내용은 깃허브 push시에는 배제된다)

 

ex) 저 "react-scripts start" 가 있기 때문에 우리가 npm start를 사용할 수 있는 것!

 

- 위 내용들은 깃허브에 올릴 때에는 제외되도록 설정되어 있다.

- 코딩한 내용을 바로바로 웹브라우저에서 확인할 수 있는 환경을 위해 서버 연동이 필요하다.

 

---

 

** Github 에서 react 파일 클론하기 

 

- 클론하고자 하는 react 저장소에서 code-저장소 위치 복사

 

- git clone 저장소주소 로 적어주기. 그럼 해당 위치에 저장소와 같은 이름의 새 폴더가 생겨난다.

 

- node_modules가 없기 때문에 npm start 해도 당연히 실행되지 않는다.

- .gitignore 때문에 필요한 라이브러리들이 빠져있는 것이다.

 

type 파일명 : 텍스트파일의 내용보기

- 여기에 있는 파일들이 설치되어야 한다.

 

- 폴더안에서 npm install 하면 알아서 구동에 필요한 dependencies를 설치해준다.

 

---

 

- state : 클래스 안에서 상태값 정의하기. 필드를 선언하는 느낌

- render(){} : 메소드를 정의하는 느낌

 

- render 안에서 jsx 객체가 화면을 구성한다.

 

 

- index.js 에서 App.js를 import해서 사용하고 있다.

- 저 <App /> 위치가 root라고 생각하면 된다.

 

- /public/index.html 의 root 안에서 화면 구성을 한다.

- body 안의 div 안쪽이 root이다.

 

---

 

App03_ex1

 

 

- data 를 사용한다. UI에서 사용하는 어떤 데이터(model)는 모든 타입을 담을 수 있다.

- UI 에서 사용하는 모델은 상태값으로 state로서 관리를 한다.

 

- state(상태값) 으로 관리하는 데이터에 변화가 생긴다면,

 해당 데이터를 사용하는 UI는 자동 update가 된다.

 

- 모든 데이터를 상태값으로 관리할 필요는 없다.

 데이터에 변화가 생겼을때 UI에 업데이트 되기를 원한다면 state에 넣고 관리하면 되는 것이다.

 

- 상태값으로 관리되는 자원 중 하나를 UI에서 사용하고 있다.

 

- 입력한 문자열을 읽어와서 새로운 배열을 얻어냈다.

- 이 새로운 배열을 setState해서 넣어준 것이다. 상태값을 바꾼 것!

 

- 최초 로딩 시점에 들어있던 참조값과 지금의 참조값은 다르다.

 

 

- 저 빨간 박스를 실행하기 전의 this.state.msgs == newArray 둘을 비교해 보면 다른 배열이다.

- 상태값이 바뀌었다고 해서 배열이 바뀐 것은 아니다.

 

- 아이템이 수정되었다고해서 바뀐 것은 아니다.

- msgs에 들어간 값이 바뀌어야만 변화로 인지된다.

- 그래서 msgs:newArray setState 로 바꿔주는 작업이 필요하다.

 

 

- 여기서 데이터의 변화란?

 

- number는 새로운 number type을 넣어주면 되고, ex) 10=>11

 String 은 다른 String을 넣어주면 되고, ex)"kim" => "park" 으로 바꾸면 변화가 인지된다.

 object도 새로운 object를 넣어주면 된다.

 

- array도 새로운 array를 넣어주면 된다.

 안에 있는 값이 바뀐다고 해서 새로운 object 가 되는 것은 아니다. 전체 배열을 새 배열로 교체하는 것!

 

 

- 새로운 배열을 얻어내서 msgs에 덮어쓰기하는 것이라고 생각하면 된다.

- 아예 새로운 배열로 만들어버리기!

 

 

.map()

.concat()

.filter()

.reduce()

 

이런 함수들을 자주사 용한다.

다른 언어에도 비슷한 동작을 하는 메소드가 많다. 잘 익혀두면 파이썬, 자바에서도 익숙하게 쓸 수 있다.

 

 

---

App03_ex2

 

- this.xx(필드명) 으로 저장하는 값의 경우

 

 

* java : 미리 선언된 필드만 사용가능

- this.name은 필드를 가리킨다. 필드를 사용하려면 반드시 선언되어 있어야 한다.

 

* javascript : 필요에 따라서 필드를 동적으로 만들어낼 수 있음

- 클래스의 개념 있음. 필드 선언 안 하고도 사용 가능. 코드가 실행되는 시점에서 필드가 만들어진다.

- 필드가 선언되어 있으면 선언된 곳에 들어가는 것이고, 선언되어 있지 않으면 만들어지면서 값이 들어가는 것이다.

 

 

- 필요에 따라 어떤 값을 필드에다가 저장해 놓은 것. state에만 값을 저장해놓을 수 있는 것은 아니다!

- UI 와는 상관없는 값인 경우 필드에 담으면 된다.

- 필드에 담긴 값을 아래에서 참조하여 사용할 수 있다.

 

 

- 문자열을 읽어내는 방법이 위 예제와 다르다.

 

1) 'input요소'에 이벤트가 걸려 있음. input 요소에 들어온 값을 읽어와서 이벤트 객체에 전달한 것

- 참조값이 target 방에 저장됨. e.target.value 하면 읽어올 수 있다.

2) input요소가 아니라 '버튼'에 이벤트가 걸려 있음.

- 이 이벤트의 매개변수로 참조값을 받아서 e.target으로 읽어온다 해도, 이것은 '버튼'의 참조값을 읽어오는 것이 된다.

 

- 2)의 경우, 이벤트 객체 e가 버튼을 가리킨다.

 

- 2)에서 input요소의 참조값을 알기 위해서는?

→ 일단 필드(inputText) 에 담고 필드의 참조값을 사용한다.

 

- React에서는 document.querySelector(#id) 를 잘 사용하지 않는다.

- 어떤 요소에 id를 부여하는 것이 좀 불안한 사용방식이므로..!

 

- ref 객체에 함수를 하나 선언한다.

- 리액트가 함수를 호출하면서 매개변수에다가 이 객체의 참조값(refenrence value)을 전달해준다.

- 전달받은 참조값을 ref라는 변수에 담는 것 (ref 매개변수명은 마음대로 지어도 된다)

 

- 열어서 확인해보면 콘솔 창에 인풋요소의 참조값이 찍힌다.

 

- Vue js에서는 id를 부여하듯이 사용함. this.$refs.one 으로 참조하여 사용했다.

 

---

 

App03_ex3

- 컴포넌트, 자식 컴포넌트 import 해서 사용하기

 

return(
    <ul>
        {list}
    </ul>
);

- 출력되는 부분은 자식 컴포넌트의 <ul>. 자식 컴포넌트를 import해서 사용한것

 

import FriendComponent from "./components/friendComponent";

- FriendComponent.js 파일을 import해서 FriendComponent 라는 이름으로 사용하겠다. 라는 의미!

- 선언하는 이름(주황색)은 바꿀 수 있다.

 

- Friendcomponent.js 이 파일 자체를 import하는 것이다.

- 이 안에 있는 어떤 변수, 함수, 상수, object 등... 무엇을 사용하는 것인지?

 

export default FriendComponent;

- 이것을 사용하는 것이다! 이것은 곧 class Friendcomponent를 가리킨다.

  (js에서는 class는 함수라고 생각해도 무방하다)

- 저 코드 자체가 이 파일을 import하면 이것을 쓰게 해주겠다는 의미를 가지고 있다.

 

- export default xxx; 이면 FriendComponent.js 파일 안에서 이 xxx가 import된다.

 

- 여러 개를 import 할 때는 뭘 가지고 올 지를 import { } 안에  표시하면 된다.

 

- component마다 자기만의 UI, 자기만의 데이터를 가지고 있을 수 있는데,

  누군가 프로그래밍을 잘하는 사람이 component를 잘 만들어 놓았으면

  다른 프로그래머가 그 js 파일을 가져와서 import해서 사용할 수 있다

- 복잡하고 만들기 어려운 UI, css 등등을 그대로 가져다 쓸 수 있다. 편리하고 효율적임!

 

- FriendComponent 안에 동작, UI 등이 이미 들어있다.

- 이런 component를 몇개든 import 해서 쓸 수 있다.

 

- 이 컴포넌트에 전달할 내용이 있으면

 특정 property(속성) 이나 자식 컴포넌트에 필요한 데이터, 함수를 전달할 수 있다.

- 함수의 경우 자식 컴포넌트에 어떤 이벤트가 일어났을 경우 호출하도록 작성 가능!

 

- this.props.property명 으로 불러와서 사용한다.

- 위에서는 배열1개, 함수2개를 불러와서 사용하고 있다.

- 배열은 list에 넣어서 사용하고, 함수는 특정시점에 call 하고 있다.

 

 

- 부모 컴포넌트 쪽으로 함수를 호출하면서 값을 전달한다. object를 던진다!

 

 

- 이 던진 값은 부모 컴포넌트의 data 위치에서 받는다.

- 이 받은 값을 가지고 어떤 동작을 할 지는 부모 컴포넌트에서 정한다.

 

- 이렇게 전달되는 과정을 추적해가며 실행의 원인을 찾아서 분석하기!

 

---

 

참고) Material-UI 시작하기 : 링크

* 공식 홈페이지: 링크

 

- 다양한 아이콘, 템플릿 등이 준비되어 있다. 이것을 import 해서 사용하면 된다.

 

 

* React Bootstrap : 링크

 

- React 용 부트스트랩도 있다. import 하여 간편하게 사용한다!

 

- figure 등도 component 개념으로 불러다 사용할 수 있다.