이번에는 unit conversion(단위변환) 앱을 만들어보자! 분 -> 시간, 시간 -> 분, km -> mile, kg -> pound 우선은 아래와 같이 작성하였는데, JSX에서는 다르게 표현해야하기 때문에!!!! 이는 에러가 나지 않는다.왜냐하면 production.min.js을 사용하고 있기 때문에! 우리가 이를 development로 바꿔준다면 아래와 같이 유효하지 않은 DOM property 'for'이 있다고 Warning이 나오게 된다. for은 JavaScript용어로 class와 같다고 생각하면 된다. h1에 class를 hi로 지정해줘도 똑같은 에러가 난다. 그래서 우리는 JSX를 사용하고 있고 JSX는 HTML과 비슷하지만 다른점 몇가지가 있는데 - class를 사용하면 안된다...

counter 값을 바꿀 수 있는 방법이 두가지가 있는데 1. 이전과 동일하게 setCounter 함수에 counter변수를 이용하여 값 변경하기 setCounter(counter + 1); 2. setCounter 함수에 함수를 넣기 (return 값이 state가 됨) (이것이 더 안전) setCounter((current) => current + 1);

modifier함수를 산용해 state, 즉 어플리케이션의 데이터를 바꿀 때, 컴포넌트는 새로운 값을 가지고 다시한번 렌더링 된다. - 컴포넌트가 재생성 됨 데이터가 바뀔때마다 컴포넌트를 리렌더링하고 UI를 refresh하는 것임 다음과 같이 코드를 구성하면 처음, 그리고 버튼을 클릭할때마다 rendering되는 것을 알 수 있다. 하지만 react는 변경한 부분(숫자-클릭수)만 변경한다!!!! 즉, modifier 함수로 state를 바꿀 때, 컴포넌트 전체가 새로운 값을 가지고 재생성된다. 결론 : State가 변경될 때, Rerendering된다

const [counter, modifier] = React.useState(0); 이번에는 modifier가 왜 필요한지 배워보자. 먼저 버튼을 클릭하면 counter가 올라가도록 아래와 같이 하였다. 콘솔로는 잘 출력이 되었지만, 화면에는 출력되지 않았기에 다시 렌더링 될 수 있도록, onClick함수에 다음과 같이 넣어주었다. 근데 매번 이와같이 렌더링함수를 넣어주기는 번거롭지않는가 그래서 const로 바꾸고, counter업데이트를 할 때 setCounter로 counter를 높여보자. 그럼 다음과 같이 정상적으로 숫자부분만 업데이트 되고 있는 것을 확인할 수 있다.

먼저 counter가 0인 시점에서 최초로 아래를 렌더링 할 것이다. function App() { return ( Total clicks: {counter} Click me ); } render(); 그러고 나서 counter 값을 증가시킬 때 리렌더링하려고 한다. function countUp() { counter = counter + 1; render(); } function render() { ReactDOM.render(, root); } 하지만 이 방법은 좋은 방법이 아니다. 그래서 이번에는 새롭게 좋은 방법으로 한번 시도해보자. React.js 내에서 데이터를 보관하고 자동으로 리렌더링을 일으킬 수 있는 최고의 방법을 배워보자. 먼저, 어디에 데이터를 담으면 되는지 알아보자. 아까는 let ..

이번에는 State에대해서 배워보자. state는 기본적으로 데이터가 저장되는 곳이다. 우선 vanilla.html에서 작성하던 코드를 보면, 버튼을 클릭하면 counter가 올라가도록 작성하였는데 이것을 state로 만들 수 있다. 자 우선 아래의 코드를 React.js코드 내에서 카운트를 셀 수 있게 만들어보자. 1. 좋지않은 방법 그런데 우리가 이전에 vanila.html 파일로 버튼을 클릭하면 body와 span이 업데이트하는 것을 확인할 수 있는데 index.html 파일로 버튼을 클릭하면 UI에서 바뀐부분만 업데이트 하고있는 것을 확인할 수 있다. 이는 React JS는 렌더링 된 컴포넌트가 무엇인지 확인하고 바꿀 부분만 바꾼다는 것이다. 이로 아주 좋은 인터렉티브하게 제작이 가능하다는 것을 ..