Study/React
-
react의 bind는 무엇일까? (부제. 이벤트 처리하기)Study/React 2020. 7. 5. 20:02
React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 몇가지 문법 차이는 다음과 같다. * react의 이벤트는 소문자 대신 camelCase를 사용한다. * JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. 예를들어, html에서 버튼에 온클릭 이벤트를 작성한다면 아래와 같다. Activate Lasers 그러나 React에서는 약간 다르다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야한다. 예를들어 일반 HTML에서는 새 페이지를 여는 링크의 기본 동작을 방지하기 위해 다음과 같은 코드를 작성한다. Cl..
-
리엑트란 무엇이며 왜 사용하는가?Study/React 2020. 7. 4. 17:11
What is React? 리엑트란 무엇인가? 리엑트는 facebook에서 만든 자바스크립트 UI라이브러리로써 user interfaces와 프론트엔드 어플리케이션을 만드는데 사용된다. 리엑트는 기술적으로는 라이브러리이지만, 이것의 행동과 능력때문에 종종 framework로도 불린다. 리엑트는 현재까지 업계에서 가장 인기있는 framework이다. 한마디로 간단히 말하면, 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. 리엑트는 왜 사용하는가? 우리는 html, css만으로도 웹사이트를 만들 수 있다. 그러나 여기에 유저의 행동흐름에 따라서 동적인 화면을 보여주도록 하기 위해서 javascript를 사용한다. 그런데 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션이다. 브라우저상으로도..
-
react component lifecycleStudy/React 2020. 6. 4. 13:59
컴포넌트가 로딩되기 시작하는 Mounting constructor 클래스 생성자 이것은 어찌보면 당연합니다. 어떤 클래스를 만들더라도 생성자보다 더 빨리 샐행되는 로직은 없기 때문입니다. 하지만 지금의 리액트에서는 생성자를 건드릴 일이 거의 없어졌기 때문에 가볍게 넘어가도록 하겠습니다. 아직 클래스 인스턴스가 막 실행된 시점이기 때문에 이 시점에는 브라우저에서 우리가 작성한 JSX가 보이지 않습니다. 실제 로딩이 이루어지는 render constructor메소드가 실행된 이후에는 render 메소드가 실행됩니다. render메소드는 메소드 이름 자체로 어떤 일을 하는지 나타내고 있습니다. 이 메소드가 실행되면서 JSX가 HTML로 변환되어 우리가 보는 웹 브라우저에 나타나게 됩니다. 그러나 한가지 명심해..
-
fragmentStudy/React 2020. 6. 4. 12:47
fragment React의 패턴은 Component가 여러 요소를 반환하는 것이 일반적입니다. Fragements 를 사용하면 DOM 노드에 추가하지 않고 하위의 목록을 그룹화 할 수 있습니다. render() { return ( ); } 새롭게 짧은 구문도 나왔지만, 아직 많은 툴에서 지원하지 않고 있습니다. Motivation 일반적인 패턴은 아래와 같이 컴포넌트가 자식리스트를 반환하는 것 입니다. class Table extends React.Component { render() { return ( ); } } 렌더링 된 HTML이 유효하려면 가 여러 엘리먼트만 반환해야 합니다. 의 render() 안에 부모 div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않습니다. class Colum..
-
Child Components Update Their Parents' stateStudy/React 2020. 6. 1. 21:35
지난 레슨에서, 여러분은 stateful한 부모 컴포넌트에서 stateless한 자녀 컴포넌트로 정보를 전달했다. 이번 레슨에서는, 당신은 패턴을 좀더 확장할 것이다. stateless한 자녀 컴포넌트는 부모 컴포넌트의 state를 업데이트할 수 있다. 이것이 어떻게 동작하는가 1. 부모 컴포넌트 class는 this.setState()를 호출하는 메소드를 정의한다. 예를들어, Step1.js의 .handleClick()메소드를 보아라. //Step1.js import React from 'react'; import ReactDOM from 'react-dom'; import { ChildClass } from './ChildClass'; class ParentClass extends React.Comp..
-
Don't Update propsStudy/React 2020. 6. 1. 21:10
잘했다! 여러분은 stateful한 컴포넌트에서 stateless component로 정보를 전달했습니다. 여러분은 이것으로 많은 것을 할것입니다. 여러분은 this.setState()를 호출함으로써 state를 변화시킬 수 있다는 것을 배웠습니다. 당신은 궁금해할 수 도 있어요 : 그렇다면, porps도 컴포넌트가 변화시킬 수 있는거 아냐? 대답은 : 아닙니다!! 컴포넌트는 this.props를 절대 업데이트 할 수 없습니다. 절대 해서는 안되는 나쁜 예를 봅시다. import React from 'react'; class Bad extends React.Component { render() { this.props.message = 'yo'; // NOOOOOOOOOOOOOO!!! return {thi..
-
component State (부제. state와 props의 차이점)Study/React 2020. 6. 1. 20:30
State와 props의 차이점은 무엇인가? props("properties"의 줄임말)와 state는 일반 JS객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있으나, 한 가지 중요한 방식에서 차이가 있다. props : (함수 매개변수처럼) 컴포넌트에 전달됨. state: (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됨. 더 자세히 알아보자. Props props는 properties의 줄임말로써, Component로 데이터를 전달한다. render ( Hello movies! {this.props.title} ) class MoviePoster extends Component { render() { return ( {this.props.posterUrl} ); } } 위 코..