차근차근 배움터

modifier 함수를 사용해 state, 즉 어플리케이션의 데이터를 바꿀 때 새로운 값을 가지고 컴포넌트 전체가 재생성된다. "state가 바뀌면 re-rendering이 일어난다"

useState를 사용할 때 첫번째 변수는 초기값, 두번째 변수는 값을 변경하는 함수라고 이야기 했었다. 오늘은 그 두번째, 변수의 값을 변경하는 함수 modifier에 대해서 알아본다. setCounter(counter + 1); 위의 코드가 그냥 counter + 1 하는 거지 counter 변수값이 변경 되는 건 아니지 않나 생각했는데 const [counter, setCounter] = React.useState(0); React.useState의 두 번째 함수 기능 자체가 첫번째 변수의 값을 변경하는 거라서 count = count + 1 로 이해하면 되는 것 같다 index.html

1. React 변수 사용 컴포넌트나 JSX에 변수를 추가하고 싶을 때 { } 사용 2.업데이트 시 render 함수 사용 UI를 업데이트 하고 싶으면 변화된 부분을 보여주고 싶다면 render 함수를 호출해야 한다. 3. useState 배열의 첫번째 값은 초기값이고 두번째 값은 값을 바꾸는 함수이다. 배열에 담긴 요소들을 각각의 값으로 꺼내는 방법 const food = ["tomato", "potato"]; const [myFavFood, mySecondFavFood] = food; 변수 myFavFood에는 tomato 가 mySecondFavFood에는 potato 값이 할당 된다.

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, ..

React 전에 Vue 강의를 한 번 다른 곳에서 수강했었는데 그 덕인지 조금은 수월하게 입문 강의를 들을 수 있었던 것 같다. 정말 간단하게 핵심만 짚어준 강의였고, 다른 분들도 시작하기에 아주 좋은 강의라고 생각한다. 물론 이후에 계속 다른 심화 강의를 듣거나 공부해야 하는 것은 필수 과정! 배운 내용들을 정리해 본다. npm init react-app my-app : 프로젝트 생성 node_modules : 모듈이 자동으로 설치가 되었다. # 에러 발생 tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. > 해당 에러는 무시하고 넘어갔다 npm을 ..