nose딩

-> React에서 상태(state)를 더 효율적으로 관리하는데 사용하는 상태 관리 라이브러리 

*리액트 특성상 한 컴포넌트에서 데이터 상태에 변화가 생겨 업데이트하면 하위 컴포넌트도 모두 리렌더링되는 문제 !

-> Redux로 해결 ! -> 상태관리의 로직을 컴포넌트 밖에서 처리 !

*스토어 : 애플리케이션의 상태 값 저장

*액션 : 상태 변화 일으킬때 참조하는 객체

*디스패치 : 액션을 스토에어 전달 !

*리듀서: 상태를 변화시키는 로직이 있는 함수 !

*구독: 스토어 값이 필요한 컴포넌트는 스토어를 구독한다 ! 

redux는 정의된 Action과 Reducer에 의해 구독하고 있는 컴포넌트에 state 전달 !

<실수 or 헷갈리거나 기억해야 할 거 같은 것들,, ? >

*props.fav = { fav } 

*map function -> array 의 각 item에 function이 적용됨 !

*name

-> name이 일치하게 쓰여야한다.. 첨에 둘이 다르게해서 I like만 출력이 되었다,, 

react-router-dom은 리액트로 단일 페이지 어플리케이션을 만들때 많이 사용된다고 한다.

먼저 npm install react-router-dom 으로 설치 !!

첨에 이거를 깜빡해서 컴파일이 안되는데, 이 문젠줄 모르고 존재하지 않는 오타만 겁나 찾았다,, ㅠ ㅠ

*Seonhos.js

*App.js

******다음줄에 하려면 <br />

문법 공부를 해야할 것 같다 ,,,

* 홈

여기가 첫 페이지 홈 홈 홈 홈 ~

홈 눌러도 여기로 온다 ~

* 누구?

* 선택

-> 귀여운 선호님

-> 섹시한 선호님

처음엔 원래 다 간단한거 하는거잖아 ㅎ_ㅎ , ,, 

지금 드는 생각은 그냥 필요할때 마다 찾아서 하는게 낫나 라는 생각도 든다,,

아냐 다 해보쟈 홧틔이잉 , , 🔥

버튼을 누르면 카운트가 증가하게 만드려고 한다~

Count.js 파일을 따로 만들었다.

onClick, 즉 버튼이 눌렸을 때, count를 1씩 증가시키고,

return 부분에 보면 버튼과, 현재 카운트가 출력되게 처리하였다.

아직 문법이 많이 익숙하지 않다. ㅠ_ㅠ 

그리고 import해서 넣어주었다.

저거 누르면 카운트 올라간다

,, 귀엽긴하네, ,^^ ,,

책,,보는데 정말 1도 몰라서 결국 구글링했다.

오늘 목표는 hello world 띄우기 ~

npm과 nodejs는 아마도,,깔아져 있었을 거구 ,, yarn 추가적으로 설치해주었다.

cmd를 실행해 다음과 같은 명령어를 입력했다.

npm install -g create-react-app 

프로젝트 생성할때 편리하게 해주는 거라고 한다 ~

*프로젝트 생성

create-react-app hello-world

hello-world라는 폴더가 생성될 것이다 !

cd로 여기로 이동해서

yarn start 해주면 창이 뜰것이다 ~

사실 이제 여기서 당황했다 코드 어떻게 보는거지 하고 ,,

생각해보니 Visual Studio Code가 깔려있어서 이걸 사용했다.

Open Folder로 hello-world 폴더를 열어주었다.

App.js파일을 이렇게 해주었다.

주석 처리한 부분은,,기본으로 눈에 보이는 부분 같은데 일단 주석처리로 남겨두었다.

흰 배경에 hello world만 출력시킬 것이당 크크

여기서 안 건 주석처리 방법 ! 

*주석처리 방법 : {/* ... */}

성공 ,, 시작이 반이라고 했다. 반했다.