props에 무엇을 넣어볼 수 있는지 보자. 이때까지 한 것으로는 true, false, string, function 등... Btn을 렌더링하는 컴포넌트가 어떻게 되는지 알아보자. ex) 부모 컴포넌트가 state를 변경할때 어떤 일이 일어나는지 보자. 우선 여기서 잠깐! 여기에서 전달되는 onClick은 onClick함수가 아닌, prop이라는 것을 꼭 인지하여야한다. 자 그러면, 혼란을 맊기 위해 changeValue라고 이름을 바꾸자. 그럼 위와 같이 Save Changes를 클릭하면 Revert Changes로 바뀌는 것을 알 수 있다. 꼭 명심해야하는 것은 이곳에 prop으로서 넣는다고하면 자동적으로 return안으로는 안들어간다는 점! 그래서 항상 아래와 같이 써줘야 사용할 수 있다는 점을..

다음과 같이 두개의 버튼을 style을 입혀 작성해보았다. 그런데 두개의 버튼을 다르게 만드려고 하는데 이를 더 간단하게 만들어보자! 버튼으로 컴포넌트를 만들고, 텍스트만 바꾸도록 만들어보자. 그럼 다음과같이 banana(바꿔도 상관없음)를 주면, props로 전달시켜주면 다음과 같이 두개의 object를 콘솔에 찍어내게 된다. 왜냐하면 두개의 버튼을 렌더링 했기 때문에 그럼 다음과 같이 설정하게 된다면, 버튼의 이름도 정상적으로 출력됨을 알 수 있다. {props.banana} 귀찮다면 이전과 다르게 다음과 같이 할 수도 있다. 다음과 같이 두개의 인자도 전달이 가능하다. 폰트스타일과같이 style에서도 조건문을 둘 수 있다.

먼저 App 컴포넌트를 복사해서 새로운 컴포넌트(MinutesToHours)를 만들어보자. 그러고 다음과 같이 불러와주자. 지금 이것은 분할 정복(divide and conquer)이다. 자 그러면 새로운 컴포넌트도 만들어보자. 우선 두 컴포넌트를 app에서 지우고 다음과 같이 select문으로 변경해서 console창을 확인해보면 다음과 같이 정상적으로 value값을 0아니면 1로 가지고 온다. 자 그러면 이 value를 setIndex처리를 해보자. 그러면 javascript 문을 사용하기 위해 {}를 삽입하여 코드를 구성해보자. 정상적으로 select값에 따라 올바른 페이지가 출력된다. 초기값도 정해줘서 다음과 같이 제작할 수도 있다. 아니면 이렇게 default 페이지에서도 다음과 같이 나타낼 수..

먼저 flipped와 setFlipped를 invert, setInvert로 변경하고, button을 아래와 같이 변경하자. {inverted ? "Turn back" : "Invert"} 그러면 각 변할때마다 버튼이 변하게 된다.

이번에는 단위변환을 뒤집어보는 함수(flip function)를 만들어보자. 첫번째가 disabled이게, 다음엔은 두번째가 disabled이게 먼저 버튼을 만들어보자. 이 버튼은 flipped가 true면 !flipped는 false가 된다. 근데 state 계산을 이 부분을 바탕으로 하는건 좋지는 않다. 현재 state 값을 넣어주고, 겨로가는 반대로 도출하라고 명령해주는 것이다. flipped가 false이면, hours는 disabled되도록 해보자. flipped의 초기값이 false이고, 버튼을 클릭하면 onFlip함수가 가동이 되어 현재값을 반대 값으로 조정해주어 flipped 값이 true->false->true->false로 버튼을 클릭할때마다 달라진다. 이에 따라 flipped 값이 t..

우선 setState default 값을 0으로 두고, onChange 함수를 지우게 된다면, 다음과 같이 아무리 숫자를 입력해도 빈칸의 값을 변하게 할 수 없음을 알 수 있다. 이 이유는 input의 value가 state고, state의 defulat값이 0이기 때문인 것이다. 그리고 onChange 함수를 지웠기 때문에, input이 키보드 이벤트를 감지한다고 해도 업데이트가 이루어지지 않는 것이다. 그래서 controlled input을 가지고 있고, event도 리스닝하고 있다. 자 그러면 우선 다음과 같이 변경하면 hours에도 동일한 vlaue를 주었기에 Minutes에 넣은 값이 Hours에 동일하게 적용되어 변경된다. 하지만 Hours에서 변경하면 아무런 문자도 입력할 수 없게 되는데 이..