차근차근 배움터

변수가 변경되고 코드가 실행되어도 리액트는 신경 쓰지 않는닷~! 일부 변수의 변경이 함수를 다시 실행하게 하지 않는다. 다시 실행된다고 하더라도 초기 값으로 다시 설정이 되어서 변경된 값이 화면에 노출되지 않을 것이다. 리액트 메모리 어딘가에서 관리되고 setTitle과 같은 함수는 단지 새로운 값만 받는 것이 아니라 호출한 컴포넌트 함수는 이 state를 업데이트 하는 함수이다. 즉 state를 업데이트할 때 컴포넌트를 다시 호출하고 싶으면 새로운 값을 할당 + state가 등록된 컴포넌트는 재평가 되어야 함 > 리액트에게 말함 다시 실행하고 jsx 코드를 다시 평가한다. 그런데 위의 함수에서는 Updated! 된 값으로 title 이 바뀌지 않는다. 왜냐하면 state를 업데이트하는 함수를 호출했을 ..

화면에 있는 값을 변경하기 위해서 위와 같이 clickEventHandler에 변수 값을 바꾸는 함수를 실행해도 화면에서는 변화가 없다 console.log를 찍어보면 변수가 성공적으로 변한 것을 확인할 수 있다. 그럼 왜 화면에서 값은 변하지 않는걸까? 간단히 리액트가 이런 방식으로 작동하지 않기 때문이다. 리액트가 어떻게 JXS 코드를 전달하고 어떻게 검토해서 화면에 불러오는 지 알아야 한다 컴포넌트는 함수형이다 그리고 그 함수형은 JSX코드를 반환한다 함수이기 때문에 누군가 호출해야 한다 하지만 우리는 컴포넌트 함수를 호출한 적이 없다 function ExpenseItem() { ... } 형태를 ExpenseItem() 으로 호출하지 않았다.... 대신 과 같은 HTML과 비슷한 JSX 함수를 이..

지금까지 만든 간단한 화면은 정적이기 때문에 동적으로 바꾸어 보려고 한다. 리액트는 모든 기본 이벤트를 on으로 시작하는 props로 노출한다 예를 들면 onClick 클릭 이벤트를 위해서 onClick을 props로 button에 추가한다. 이벤트가 실행되기 위해서는 함수가 실행되어야 한다 1. 익명의 화살표 함수를 이용해서 실행할 수 있다. { console.log('button clicked!') }}>Change Title 하지만 수 많은 코드를 jsx에 넣는 것은 선호하지 않을 것이다 const clickedHandler = () => { console.log("clicked!"); } Change Title 코드를 보면 이렇게 clickedHandler에 () 를 붙이지 않은 것을 볼 수 있다..

component와 props라는 중요한 개념을 배웠다 클릭과 텍스트 입력과 같은 사용자 이벤트 다루기에 대해서 알아보겠다

모듈 리소스 여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷을 이 Github 저장소에서 찾을 수 있습니다 https://github.com/academind/react-complete-guide-code/tree/03-react-basics-working-with-components 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.

선언형 코드라고 언제 했는지 기억이 안 난다..........

선생님은 기존 함수들을 화살표 함수로 변경해주었다 import './Card.css'; const Card = (props) => { const classes = 'card ' + props.className; return {props.children} } export default Card;

사용자들, 즉 우리는 아무것도 할 수가 없습니다 리액트로 최신의 사용자 인터페이스를 구축하는 이유는 변화를 줄 수 있는 사용자 인터페이스를 구축하고 싶기 때문입니다

Expense가 들어간 파일들을 모두 담는 폴더를 만들고 UI를 담당하는 Card 파일을 만들어서 구분한다 가장 좋은 방법은 같이 일하는 사람들이 이해할 수 쉽게끔 나누는 것이다

개발자 도구를 열어보면 자바스크립트 파일을 확인해볼 수 있다 브라우저는 jsx 문법을 지원하지 않는다 화면 뒤에서 일어나는 변환 덕분에 여기에서 작동한다 package.json을 보면 react와 react-dom이 있는데 우리 프로젝트에서는 react를 사용하지 않고 있다. 오래된 버전의 리액트에서는 항상 import React from "react"; 구문을 모든 파일에서 작성했어야 했다 이제 이 import는 모든 곳에서 생략할 수 있는데 이것 역시 프로젝트 위에서 일어나는 마법같은 변환의 과정 중 하나라고 할 수 있다. 리액트 객체에서 호출된 두 가지 메서드를 변환했다 리액트를 import 해야 했던 이유다 jsx를 사용할 때 위의 코드가 자동으로 생성되기 때문에 react를 무조건 import ..