이벤트 처리하기 리액트에서의 이벤트 등록 리액트 공식 튜토리얼에서는 HTML 태그에서 바로 이벤트를 주는 법과 비교하면서 설명하고 있는데 나는 자바스크립트에서 선택자를 이용해 불러와서 이벤트를 등록하는 방법만 사용하고 있어 그 예시는 이해를 잘 못하겠지만 클래스 이름으로 가져와서 이벤트를 부여하는 것이 아닌 사용할 이벤트 함수 이름을 태그에 미리 등록해두고 컴포넌트 내에서 이벤트 함수를 만드는 것..같다 class App extends React.Component { constructor(props) { super(props); this.state = { number :0 } } render() { return( Hello, React {this.state.number} + - ) } } ReactDOM.render( .. React 4년 전
lifecycle 생명주기 컴포넌트가 DOM트리에 렌더링되기까지의 과정을 마운트라고 한다 생명주기 함수들 중에 지금 알아볼 함수는 componentDidMount, componentWillUnmount이다 componentDidMount class Count extends React.Component{ constructor(props) { super(props); this.state = { cnt : 0 } } counting(number){ return number +=1; } render() { this.state.cnt = this.counting(this.state.cnt); return ( {this.state.cnt} ) } } function Start(){ ReactDOM.render( , document... React 4년 전
state 이전 포스팅에서는 props객체를 통해서 자식 컴포넌트에게 값을 주는 것을 확인했다 state는 props와 비슷하게 컴포넌트가 가지고 있는 값이지만 부모에게서 넘겨 받는 것이 아닌 처음부터 컴포넌트 내부에 존재하고 있는 값을 state라고 한다 순수 함수처럼 작동해야하는 컴포넌트의 특성상 props는 외부에서 넘겨 받는 값이므로 내부에서 건드릴 수 없지만 state는 내부에서 수정이 가능하다 state와 lifecycle(생명주기 메소드)를 사용하기 위해선 컴포넌트를 클래스로 정의해주어야하는데 최근버전에서도 Hook을 이용해서 함수형 컴포넌트에서도 state와 생명주기 메소드를 관리할 수 있다고 하는데 이 포스팅은 리액트 공식 튜토리얼의 순서를 따라가고 있으니 일단은 이렇게.. let cnt = -1;.. React 4년 전
Components 컴포넌트란 입력 받은 값을 가지고 화면에 표시할 React엘리먼트를 반환하는 함수라고 생각하면 쉽다 컴포넌트를 만드는 방법 중에 하나인 함수를 이용하는 법에 대해 알아보자 function Hello(){ return Hello, World } 이렇게 작성한 함수는 Hello 컴포넌트가 된다 위에서 설명한 대로 Hello컴포넌트는 JSX를 반환하고 있음으로 이는 곳 리액트 엘리먼트를 반환하고 있다 다음 코드를 살펴보자 const element = ; 리액트는 컴포넌트로 반환되고 있는 엘리먼트를 발견하면 그와 같이 반환되는 자식들을 그 컴포넌트의 내부에 암묵적으로 전달한다 위 코드에서는 Hello를 발견해서 컴포넌트가 작동하려할 때 자식인 {name : 'React'}가 props의 객체로 전달되는 것 그 .. React 4년 전
렌더링 렌더링 우리가 이전에 배운 JSX를 이용해 리액트 엘리먼트를 만든 것을 기존의 DOM트리에 업데이트하는 행위를 렌더링이라고 생각하면 된다 리액트 엘리먼트는 보통 root라는 id값을 가지고 있는 DOM노드에 렌더링하는데 코드로 살펴보자 우리가 이전 시간에 배웠던 자바스크립트의 변수를 넣은 JSX를 이용해 element라는 리액트 엘리먼트를 생성했다 ReactDOM.render(element, document.getElementById('root'));보면 생성한 리액트 엘리먼트와 root DOM트리를 인자로 넘기는 걸 볼 수 있는데 root DOM아레에 생성한 리액트 엘리먼트가 정상적으로 들어갔다 업데이트 리액트 엘리먼트는 불변객체이다 이게 뜻하는 것은 엘리먼트는 수정될 수 없기 때문에 값.. React 4년 전
JSX const element = this is JSX; js안에 작성되었지만 html태그도 있고 문자열 처럼 보이기도 하는 이 코드는 JSX라고 불리는 언어인데 브라우저가 실행되면 이 코드는 바벨에 의해서 JSX->JS 로 변환된다 변환된 코드를 보면 리액트 엘리먼트를 생성해서 반환한다 화면에 뭔가를 그릴 때 마다 리액트 엘리먼트를 우측의 코드처럼 생성해야한다면 너무 귀찮을 것이다 그래서 편의를 위해 JSX를 사용하는 것 자바스크립트 처럼 사용 JSX에서는 중괄호 안에서 모든 자바스크립트의 표현식을 쓸 수 있다 const language = 'JSX'; const element = this is {language}; 처럼 변수도 사용이 가능하며 function squart(n){ return n*n } co.. React 4년 전
