차근차근 배움터

State란? 기본적으로 데이터가 저장되는 곳이다 React.js는 전체를 로딩하는 것이 아니라 값이 바뀐 부분만 로딩한다. => Interactive 하다는 뜻 데이터가 변경될 때마다 Container를 rerenddering 하는 것이 필요하다 하지만 매번 re rendering 하는 것이 효율적은 방법은 아니다

기존에 정의한 Title 변수를 함수 형태로 만들어준다 화살표 함수로 정의한 후에 Container 내부에 그 요소를 넣고 싶다면 태그 형식으로 아래와 같이 정의할 수 있다. const Container = 그래서 우리가 직접 만든 요소들은 대문자로 시작하게 작성해야 한다. 이렇게 JSX를 이용해서 개별 요소들을 만들어서 하나의 요소 내부에 넣는 역할을 할 수 있다. 아래와 같은 요소를 보면 Container 를 함수 형태로 만든다음 render 함수 내에서도 태그 형식으로 넣을 수 있다. const Container = () => ReactDOM.render(, root); const container = ReactDOM.render(container, root);

JSX란? HTML에서 사용한 문법과 흡사한 문법을 사용 HTML와 비슷해서 React 요소를 JSX로 만드는 게 개발자에게는 아주 쉽다. JSX 방식 const title = { console.log('mouseEvent excuted') }}> "Hello Span" ; 기존 방식 const span = React.createElement( "span", { id: 'sexy-span', style: { color: 'red' } }, null, "Hello Span"); 브라우저가 JSX를 이해할 수 있도록 BABEL을 설치해야 한다. 일단은 연습 용이기 때문에 CDN 추가 그리고 script 태그에 text/babel 추가 babel 이 브라우저가 읽을 수 있는 코드로 변경해서 넘겨주는 과정이 숨..

지금까지는 React JS가 어떻게 작동하는 지를 알아봤다. 여기에서 강력한 기능 중에 하나가 바로 eventListener를 활용하는 부분이다 아래와 같이 button 요소를 만들어서 중간에 props를 넣는 저 객체 안에 onClick과 같은 마우스 이벤트를 추가할 수 있고 또 style 또한 추가할 수 있다. 세 번째 요소에는 text를 추가할 수 있다.

기존의 바닐라 자바스크립트의 경우 아래와 같은 방식으로 클릭시 숫자가 올라가게끔 할 수 있었다 Total click: 0 Click me React를 사용하기 위해서는 react를 설치해야 한다. script cdn을 추가한다. React와 react-dom을 다운로드 React JS element 생성 HTML 코드를 직접 작헝하지 않을 것이고 React.js와 javascript를 이용해서 element를 사용할 것이다. 먼저 개발자들이 사용하지 않는 어려운 방법을 살펴볼 것이다 사람들은 쉬운 방법을 좋아하기 때문에 하지만 어려운 방법으로 React js의 본질을 이해해보자 React js는 어플리케이션이 아주 interactive하게 만들어주는 library이다 react-dom은 library, ..