차근차근 배움터

이렇게 컴포넌트에 작성되어 있는 onClick 은 이벤트 리스너가 아니라 하나의 props 이다 컴포넌트를 re-rendering하고 싶지 않을 때 사용하는 개념 "Memo" const MemorizedBtn = React.memo(Btn); function Btn({ txt, changeValue }) { return ( {txt} ); } const MemorizedBtn = React.memo(Btn); function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => { setValue("Revert Changes"); } return ( ); } const root = documen..

컴포넌트에 위와 같이 속성 이름과 값을 지정하면 function에서 props로 변수를 받아서 props.banana와 같이 꺼낼 수 있다 function Btn(props) { return {props.txt}; } props는 object이기 때문에 아래와 같이 바로 받을 수도 있다 function Btn({txt}) { return {txt}; } big 속성에 Boolean 값을 넣을 때는 "" 가 아닌 {} 를 이용해서 넣어주기 function Btn({ txt, big }) { return {txt} {big}; } function App() { return ( ); }

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 값이 할당 된다.