J's Rhapsody

// Render: componentWillMount() -> render() -> componentDidMount() 다음의 사이클은 자동으로 발생함 (원하든 원하지 않든) 컴포넌트가 '존재'하기 시작하면 will mount -> did render -> did mount 예시) 영화앱 제작 시, will mount를 진행할 때 API에 작업 요청 해당 작업 수행이 완료되면, 그 다음에 데이터 관련된 작업 진행 정리 will mount를 보면 사이클이 시작되었음을 알 수 있음 render를 보면 컴포넌트가 리액트 세계에 '존재'하게 되었음을 알게 됨 did mount를 보면 성공적으로 리액트 세계에 컴포넌트가 자리잡았음을 알게 됨 // Update: componentWillReceiveProps() -..

리액트는 엘리먼트가 많을 경우 Key를 줘야 함 ----------------------------------------------------------------------------------------------------------------------------------- 예시) 영화 제목에 숫자만 출력되는 것을 원하지 않을 경우 포스터에 출력되는 값이 숫자나 true/false 같은 값이 되는 것을 원하지 않을 경우 cmd창에서 yarn add prop-type 명령어 실행 부모 컴포넌트에게 받는 정보의 종류가 무엇인지 체크할 수 있음 title을 숫자로 지정한다면 에러 발생 이를 통해 우리가 얻는 정보가 number가 아님을 알 수 있음 만약 부모 컴포넌트가 string을 보내면, Prop..

'movies' array를 가져다가, 맵핑을 해서(map) 새로운 array를 만든다. 해당 movies array 안에 엘리먼트를 활용하여 Document 참조 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org 관련 강좌. 출처 https://www.inflearn.com/course/reactjs-web/# 리액트 처음이시라구요? React JS로 웹 서비스 만들기! - 인프런 리액트가 뭔지, 차근차근..

기억할 점 컴포넌트 > render > return > JSX (JSX: 리액트로 작성하는 html) ----------------------------------------------------------------------------------------------------------------------------------- 리액트의 주요 컨셉 2가지 state와 props 부모 컴포넌트는 자식 컴포넌트에게 각각 정보를 준다 어떻게? props를 통해서 영화들의 '제목'을 자식 컴포넌트인 Movie컴포넌트에 보내고 싶다면? Movie > title 이 있고, Movie.js에서 title을 props로 불러온다. Why? Moivie컴포넌트는 title 이라는 요소가 있으니까 요소를 접근하는 ..

JSX란 자바스크립트 안에 html이 자리잡고 있음 리액트 컴포넌트를 만들 때 사용하는 언어 Rule css의 'class'가 아니라 'className' 이라고 쓴다 앱 컴포넌트는 각기 다른 functions과 methods를 갖고 있다. 기억할 점 모든 컴포넌트는 render function을 갖고 있다 render 기능은 '뭔가를 보여주는, 출력하는' 기능 render 기능 = '이 컴포넌트가 나에게 보여주는 것이 무엇인가' Creating React Components with JSX [동작 순서] yarn start - 서버 실행 JS의 모든 코드를 가져와서 html 파일에 담는다. html 파일은 public 폴더에서 찾을 수 있다. 우리는 index.js에 파일을 만들고 있다. index.j..