차근차근

0. Router 목표는 url이 달라질때마다 새로운 페이지를 띄워주는 것이다. 먼저 브라우저에서 개발을 할 수 있도록 다음과 같이 개발자 도구 - Sources - Filesystem 에 들어가서 폴더를 추가 후 작업한다.함수들을 다음과 같이 간단하게 작성하고 react-router-dom을 설치하고 import해준다. BroswerRouter로 App을 감싼다. 또한 위와 같이 코드를 작성하면 url 이 달라져도 정확한 정보를 얻기 힘들다. 하나의 예를 들어보면 "/topics"를 탐색하면 "/"와 "/topics" 둘 다 탐색되기 때문이다. 따라서 exact 를 사용해야 한다. 1. Switch Exact를 쓰지 않고도 Exact를 쓴것과 똑같은 효과를 나타낼 수 있다. Switch태그로 감싸주면된..

0. 이벤트 state props 그리고 render 함수 event, state, props 3개가 서로 상호작용하면서 앱의 역동성을 만든다. React에서는 props의 값이나 state값이 바뀌면 해당되는 컴포넌트의 render함수가 호출되도록 약속 되어 있다. 그 얘기는 props나 state가 바뀌면 화면이 다시 그려진다는 것이다. 각각의 요소를 클릭하면 그 요소에 대한 content가 출력이 되도록 해보겠다. 아래는 코드 화면이다. 아래는 mode가 welcome일때의 웹페이지 화면이다. 아래는 mode가 read일 때 웹페이지 화면이다. 여기서 React 개발자 도구에 들어간 후 직접 값을 변경할 수 있다. 1. 이벤트 설치 태그에 이벤트 설치를 해보겠다. Subject.js에서 하는 것은 ..

0. State 소개 state라는 개념은 props와 비교해가면서 봐야한다. 어떤 제품에 있어서 사용자의 입장이 있고 구현자의 입장이 있을 것이다. props는 사용자가 장치를 조작하는 장치(핸드폰의 전원 버튼 등)이고 state는 제품을 만드는 구현자들은 내부적 조작장치(내부 칩, 회로 등)이다. 정리해보면 props는 사용자가 컴포넌트를 사용하는 입장에서 중요한 것이고 state는 그 props의 값에 따라서 내부 구현에 필요한 데이터들이 state이다. 컴포넌트를 만들었을 때 컴포넌트의 기능을 조작하는 것이 props이다. 컴포넌트의 사용자에게 중요함. 사용자들에겐 알 필요도 없고 알아서도 안되는 컴포넌트 내부적으로 사용되는 것들이 State이다. 1. State 사용 App.js에서 코드를 작성..

0. 리액트가 없다면 엄청 긴 코드를 그냥 써야함 1. 컴포넌트 만들기 컴포넌트 만드는 방법 하나의 최상위 태그만 써야한다! 웹브라우저는 React라는 기술을 모른다. React는 html로 변환시켜주는 것이고 브라우저입장에서는 html 코드를 받기 때문이다. 위 코드는 javascript 는 아니다. 유사 javascript 이다. javascript에서 돌리면 에러난다. 저것은 JSX 라는 Facebook 에서 만든 언어이다. 예시 화면 컴포넌트를 정리정돈의 도구로 보면 좋겠다. 2. props React는 컴포넌트를 외부에서 조작할 때 props 를 사용한다. 좀 더 효율적인 코드 작성 가능 {this.prop.[xxxx]} 같은 방식을 이용 1 2 3 4 5 6 7 8 9 10 11 12 13 1..

0. React 웹사이트는 매우 빠른 속도로 복잡해진다. 정보가 조금만 증가해도 그 정보를 표현하는 html 태그는 기하급수적으로 복잡해진다. 사용자 정의 태그를 만들 수 있게 해준다 -> component 라고 부름 component 기능 -> 1.가독성 2.재사용성 3.유지보수 CODING : 개발환경 세팅하고 어디에 코드를 바꿔야 하는가 RUN : 실행시켜서 결과를 보는 것 DEPLOY : 모든 결과를 마무리 한 후 사용자들에게 서비스 하는 것 1. 개발환경의 종류 참고사이트 : https://reactjs.org/docs/getting-started.html 나는 toolchain을 사용할 것이다. 그 중에 Create React App 이라는 앱을 사용할 것이다. React Github 주소 :..