리액트

node.js와 npm 설치=> 환경변수 때문인지 재부팅 해야지 제대로 설치가 되었다.설치 잘 되었는지 확인npm install -g create-react-app컴퓨터 전역에서 create-react-app을 사용할 수 있도록 설치create-react-app 잘 설

작업할 폴더 만들기cmd창에서 작업할 폴더로 cd하기create-react-app을 현재 경로에 설치하기설치 완료

npm run test개발중인 앱을 확인하는 주소가 2개 나오는데 아무거나 사용해도 된다.localhost:3000으로 들어가면 웹앱이 나온다.종료하기ctrl + c하면 된다.

package 구조 확인하기public폴더 확인하기index.html파일이 존재한다. 처음 run start를 하게 되면 나오는 화면 페이지이다.index.html확인하기div id='root'부분이 중요한데 리액트를 통해서 컴포넌트를 만들어 가는데 컴포넌트들은 해당

index.css 변경하기2.App컴포넌트 CSS를 변경하기App컴포넌트는 App.js안에 구현이 되어 있고 마찬가지로 CSS도 import되어 있다. App.css를 변경하면 된다.App.css, index.css 전부 초기화하기

용량 확인하기개발자도구에서 network탭에서 용량 확인하기 1.7MB만큼 받았는 것을 볼 수 있다. 기능이 하나도 없는데 1.7MB이나 되는 것은 이상하다. 그 이유는 리액트가 사용하지 않는 기능까지도 포함하였기 때문에 상당히 파일의 무게가 무겁다.npm run bu

리액트를 쓰기 전 코드 pure.html 만들기현재 시멘틱 태그가 header, nav, article로 나누었다. 현재 보기에는 한눈에 들어오지만 시멘틱 태그안에 코드가 천만줄, 일억줄이라면 한눈에 보기 어렵다. 그래서 시멘틱 태그 안 코드를 다른 곳에 감쳐두고 이름

react로 바꾸기해당 코드를 리액트로 바꾸고자 한다.Subject라는 이름으로 컴포넌트를 만들고 class형식으로 만들려면 무조건 render함수를 사용해야 한다. 그리고 return에 render하고자 하는 html코드를 작성한다.컴포넌트를 App 컴포넌트 안에

react로 바꾸기react를 사용하지 않는 코드이다.react를 사용하여 바꾼 코드이다.컴포넌트를 App컴포넌트 안에 넣는다.결과를 확인한다.react를 사용하지 않는 코드이다.react를 사용하여 바꾼 코드이다.해당 컴포넌트를 App컴포넌트 안에 넣는다.정리1\.

문제점지금 WEB과 world wide web은 정적으로 되어 있다. 이것을 동적으로 바꾸고 싶다.이렇게 해서 넘긴 값으로 render하도록 변경하자즉 App쪽에서 속성값으로 title, sub을 넘겨주었다. 그래서 실제 Subject컴포넌트에서 받을 때에는 리액트 문

현재 App.js파일에 컴포넌트 4개 선언함하지만 하나의 파일안에 천개의 파일이 있다면 복잡할 것이다. 따라서 각각의 컴포넌트를 별도의 파일로 쪼개야 한다.src폴더 안 components 폴더를 만들고 해당 위치에 컴포넌트 파일 넣기TOC.js라는 파일을 만들었다.T

Props와 State 차이점을 알아야한다Props는 사용자가 사용하는 장치, State는 개발자가 사용하는 내부적인 조작장치이다.Props는 컴포넌트 사용자에게 중요한 정보다. 사용자에게 알 필요도 없고 컴포넌트 내부적으로 사용하는 것들을 State라고 한다.다양한

TOC.js 파일 리펙토링하기만약 TOC파일을 변경하고 싶을 때에 직접 들어가서 수정하는 것은 별로이다.앞서 사용했던 state값을 props에 전달하여 TOC에서 출력하는 것으로 바꿔보자App.js에서 state값 초기화하기여러개를 담을 때에는 배열을 사용한다. 그래

다이나믹하게 바꿔보자WEB을 누르면 HTML is Hyper\~\~~부분이 다르게 바뀌고HTML, CSS, Javascript를 누르면 그에 맞게 바뀌도록 해보자WEB 링크 걸기Web링크를 클릭하면 App에서 State값이 바뀌고 바뀐 state가 Content 컴포넌

리액트에서 onclick이벤트는 onClick과 중괄호를 사용한다.여기서 문제점은 href때문에 reload가 된다. 이것을 리로드 안되게 막아보자리액트는 함수의 첫 번째 파라미터 값으로 이벤트라는 객체를 주입해주는 것으로 약속 되어 있음콘솔창에 이벤트 객체를 출력해보

우리가 하고 싶은 것은 WEB 링크를 클릭했을 때 state에 mode가 'welcome'으로 바뀌고 하고 싶다.이렇게 하면 되지 않을까?에러가 발생한다.문제점 - this를 찾을 수 없다.this.state.mode에서 this는 이벤트가 호출되었을 때 실행되는 함수

render함수안에서 this를 사용하면 해당 컴포넌트를 가리키는데 Onclick등 이벤트 함수로 사용하는 함수에서 this는 아무값도 없다. 그래서 bind하여 this를 주입해야 한다.당연히 function에 this는 아무것도 없으므로 아무것도 출력되지 않는다.b

constructor가장 최초로 실행되는 함수로 생성자 함수를 실행할 때에는 state값을 이렇게 초기화해도 된다. 하지만 이미 컴포넌트가 생성이 끝난 다음에 동적으로 state값을 변경하려고 하면 이렇게 하면 안된다.즉 주석처리 된 것처럼 바로 = 으로 할당하는 것이

subject 컴포넌트를 주석처리 하고 APP에 직접 꺼내서 이벤트를 테스트 하였다. 이제 Subject 컴포넌트에 이벤트를 설치해보자.즉 Subject props로 기존의 title, sub을 더하여 이벤트 함수인 onChangePage를 props에 추가한다. 그러

State vs Props자기로 전달된 Props를 변경하려면 안된다. readONly이다.그래서 props를 바꾸기 위해선 이벤트를 사용하여 props를 변경한다.반면에 State는 변경할 수 있다. 오직 setState함수를 통해서만 가능하다.control 컴포넌트

render함수는 특정 컴포넌트에서 사용하는 state만 바꼇는데도 모든 컴포넌트가 render된다. 이러한 문제는 큰 프로그램에서 큰 이슈로 된다.문제 해결법 shouldcomponentUpdateshouldComponentUpdate값을 return true로 하면

getReadContent함수를 통해 선택한 data를 가져온다.state.content 전부를 순회하여 현재 선택된 select_content_id와 비교한다.TOC 컴포넌트에 주입한 이벤트로 selected_content_id가 동적으로 변경된다.이제 선택한 dat

mode가 delete이면 selected_content_id값에 해당하는 content id를 삭제한다. 그리고 setState함수를 통해 삭제한 content를 set한다.

호이스팅은 자바스크립트 코드를 인터프리터가 로드할 때, 변수의 선언을 최상단으로 끌어올리는 것을 의미한다.끌고 올라온 후 undefined를 할당한다.호이스팅은 var, 함수 선언식에서 발생하는데 이것을 해결하기 위해서 let, const, 함수 표현식을 사용한다.le

다음과 같이 지뢰찾기 페이지가 있습니다.컴포넌트 구조는 다음과 같은데요.Tr은 row의 개수, 즉 10개가 되구요Td는 각 셀의 개수, 100개가 됩니다.사실상 Props로 지뢰찾기의 필요한 데이터를 전달하는 것은 비효율적으로 보이는데요그래서 Context API를 사