Web/React (6) 썸네일형 리스트형 [Clone Coding] Twitter - Nomad Coders #1 SETUP #1.1 Securing the Keys - .env 파일 만들어서 환경변수 따로 설정 - 무조건 REACT_APP_'KEY' 형태 - gitignore에 .env 파일 추가 (key들을 github에 보이기 싫어서 정리한 것이라고 생각) - 사용자들은 볼 수 있지만 그냥 github에서 key들이 보이지 않도록 정리한 것이다. #1.2 Router SetUp - 라우팅: 다른 주소에 따라 다른 뷰를 보여주는 것 리액트 자체에는 라우팅 기능이 내장되어있지 않기 때문에 직접 브라우저의 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 한다. - 인증(로그인) 여부에 따라 render시킬 routes가 달라지게 하자. → LogIn 되어 있으면 Home / LogIn 안되어 있으면 Au.. Update/Delete 구현 코드 정리! import React, { Component } from 'react'; import TOC from "./components/TOC"; import ReadContent from "./components/ReadContent"; import CreateContent from "./components/CreateContent"; import UpdateContent from "./components/UpdateContent"; import Subject from "./components/Subject"; import Control from "./components/Control"; class App extends Component { constructor(props) { super(prop.. Create 구현 props vs state Props State read-only asynchronous can not be modified can be modified using this.setState - 상위 component가 하위 component에 명령할 때 Props를 사용하고, 하위 component가 상위 component에 명령할 때는 이벤트를 사용한다. - Props는 read-only. 자신의 하위에 포함된 것들은 변경할 수 있지만, 자신의 상위에 포함된 것들은 변경할 수 없다. 이 경우 이벤트를 사용해 간접적으로 명령해 바꾼다. - props는 상위 component가 하위 component에게 데이터 값만 전달하는 반면, state는 component 내부에서 선언해 이벤트를 생성, 변경한다. .. 이벤트 이벤트, state, props가 상호작용하며 애플리케이션을 역동적으로 동작할 수 있게 해 준다. react에서는 props값이나 state값이 바뀌면 그 state를 가지고 있는 component의 render 함수가 다시 호출된다. 그러면 이 render 함수 하위에 존재하는 components의 render 함수들도 모두 다시 호출된다. Subject.js 안의 {this.props.title}을 클릭했을 때, Subject 바깥에 있는 App.js의 state를 바꾸는 것이 최종 목표이다. 일단은 Subject라는 component를 풀어헤쳐 그 내용을 그대로 App.js에 도입해서 이벤트를 구현해보자! 원래 a 태그에는 링크를 눌렀을 때 href 속성이 가리키는 페이지로 이동한다는 기본적인 동작.. State - component가 좋은 부품이 되기 위해서는 component를 사용하는 외부의 props와 그 props를 구현하는 state가 철저하게 구분되어 있어야 한다. - component가 실행될 때 constructor 함수가 존재하면 가장 먼저 실행되어 초기화를 담당한다. - constructor(props) { super(props); this.state = { subject:{title:'WEB', sub:"World Wide Web!"} } } → subject의 state값을 위와 같이 설정 - → App component의 state값을 Subject component의 props값으로 준다. → 상위 component의 상태를 하위 component로 전달하고 싶을 때, 상위 compon.. Component React: JavaScript Library For Building User Interfaces Component: 사용자가 정의한 태그 (사용자가 만든 태그) → props를 input으로 하고 react element를 output으로 하는 함수 → component를 작성하면, 1) 가독성을 획기적으로 높일 수 있다. (복잡한 코드를 태그만을 명시하는 것을 통해 숨길 수 있다.) 2) 한 번 정의해놓으면 여러 곳에서 재사용할 수 있다. 3) 유지보수가 쉽다. (component를 수정하면 사용하는 모든 곳에서 수정사항이 자동으로 업데이트된다.) - 그냥 html으로 작성한다면 위와 같이 코드가 길게 늘어져 있을 것이다. 예시에서는 코드가 짧으니까 괜찮은데 코드가 많이 길어진다고 생각하면 내용을 보.. 이전 1 다음
