차근차근 배움터

KM 를 MILES 로 단위 변환하는 코드를 추가했다. 전체 코드

flip 이라는 Boolean 타입의 값을 이용해서 분 > 시간 단위를 더 용이하게 변경할 수 있었다. 지난 시간에 살펴본 current 사용 // const onFlip = () => setFlipped(!flipped); const onFlip = () => setFlipped((current) => !current); 일반적으로 input 요소에 작성하는 disable은 아래와 같이도 작성 가능하다. disabled={flipped === true} 코드

Jsp 기반의 html에서는 input element에 value 속성이 지정된 것과 관계없이 입력이 가능하지만 React에서는 value 속성을 value={value} 와 같이 성하면 값이 입력되지 않는다. input element에 value 속성만 지정하면 value 속성으로만 값을 control 할 수 있는 권한이 있기 때문에, 즉 사용자가 값을 입력하는 권한이 없다. 그런 의미에서 input 내 값이 변경되지 않는 것이다. 따라서 onChange를 이용하여 input element 값이 수정 가능한 상태로 변경해줄 수 있다. 코드

unit conversion app 만들기 [HTML] 에서는 label과 input 을 연결시키기 위해서 input의 id 값과 label의 for 값을 일치시킨다 그러나 [REACT] 에서는 이렇게 하지 않는다. JSX에서는 다르게 표현해야 한다. 우리는 HTML을 사용하는 것이 아니라 HTML과 비슷한 JSX를 사용하는 것이다 for는 자바스크립트 용어이기 때문에 사용할 수 없다. jsx는 html과 비슷하지만 다른 몇 가지가 있다 1) class를 사용하면 안된다 > className 으로 사용 2) for를 사용하면 안된다 > htmlfor 사용 minutes에 필요한 useState는 array를 제공하고 첫번째 element가 현재 값이 된다. setState 함수의 특징 데이터 값을 변경해..

앱의 state 바꾸는 법 state 값을 바꾸는 두 가지 방법이 있다. 1. 우리가 이미 한 방법 setCounter(counter + 1) 2. 이전 값을 이용해 현재 값을 설정하는 법 setCounter((current) => current + 1); 현재 state 값을 바탕으로 변경하고 싶으면, 위와 같은 방법으로 변경할 수 있고 이 방법이 더 안전하다 다음은 unit converter에 대해서 알아볼 것이다.

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);