땅콩이 맛난고 먹이자

React.Component API를 이용하여 프론트엔드(react)와 서버가 통신한다. React 컴포넌트 객체가 DOM에 들어가기까지 과정 "Mounting" React를 사용할 때는 컴포넌트를 class 또는 함수로 정의한다. 컴포넌트를 class로 정의할 때는 React.Component를 상속받아야한다. render()는 React.Component의 하위 class에서 반드시 정의해야 하는 메서드이다. *컴포넌트 클래스를 직접 만들어서 사용하지 말고 '합성'을 이용하자! 컴포넌트 생명주기 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출 되는 메서드들 constructor() static getDerivedStateFromProps() render() componentDid..

리다이렉트 1. 링크 이용하기 import { Link } from 'react-router'; 2. history props 이용하기 3. withRouter 이용하기 (하위 컴포넌트에서) 하위 컴포넌트는 history에 접근할 수 없기때문에 상위 컴포넌트의 Router의 history 객체와 연결해야함 React Router V4 라우팅: 다른 주소에 따라 다른 뷰를 보여주는 것 SPA: Single Page Application 페이지가 1개인 어플리케이션 리액트는 SPA! 모든 파일을 다 뿌려준 상태라 가상으로 그안에서 URL 마다 다른 컴포넌트를 그려 페이지가 바뀌는 것 처럼 보여줘야한다. 즉, SPA는 뻔적거림이 없는 말 그대로 페이지가 1개인 어플리케이션 인 것! => 주소마다 다른 뷰를 그..

EVENT 처리 LoggingButton 컴포넌트는 render()을 통해 button 요소를 화면에 그린다. 버튼에는 클릭 이벤트가 걸려있다. 매개변수는 따로없다. 버튼을 클릭하면 handleClick()이벤트가 작동한다. 변수를 전달하고 싶으면 다음과 같이 하면 된다. 조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다. if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하세요. 그러면 React는 현재 상태에 맞게 UI를 업데이트할 것입니..

COMPONENT 개념 - JS의 함수와 유사함 - props(임의의 입력 객체) --> 엘리먼트(화면 표시) 반환 - 컴포넌트 이름은 항상 대문자! 함수 컴포넌트 (JS 함수 작성) : 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 인자를 받은 후 React 엘리먼트를 반환 클래스 컴포넌트 React 엘리먼트는 기존의 DOM 태그로 나타낼 수 도 있고 사용자 정의 컴포넌트로도 나타낼 수 있다. const element = ; :React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달! 이 객체를 “props”라고 함 1. ReactDOM.render() 에서 element 인식 2. name="Sa..