분류 전체보기
useState를 통해 컴포넌트에서 바뀌는 값 관리
=> 컴포넌트에서 보여줘야 하는 내용이 사용자 인터렉션에 따라 바뀌어야 할 때, 어떻게 구현하는가? Counter.js =>counter에서 버튼이 클릭되는 이벤트가 발생했을 때, 특정 함수가 호출되도록 설정하였다. - 리액트에서 element에 이벤트를 설정해줄 때에는 on이벤트이름={실행하고싶은함수} 형태로 설정한다. - useState를 이용해 동적인 값 관리하기 useState를 사용할 때에는 상태의 기본값을 파라미터로 넣어서 호출해준다. => 이 함수를 호출해주면 배열이 반환되는데, 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수이다. - onIncrease와 onDecrease에서 setNumber를 사용할 때 그 다음 상태를 파라미터로 넣어준 게 아닌, 값을 업데이트하는 함수를 파..
props+ 조건부 렌더링
1. Props를 통해 컴포넌트에게 값 전달 1) Props란 무엇인가? => properties의 줄임말로, 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용한다. - App 컴포넌트에서 Hello 컴포넌트를 사용할 때, name이라는 값을 전달해주고 싶다고 가정할 때 => 그 후에 Hello 컴포넌트에서 name값을 사용하고 싶을 때는 어떻게 하면 될까? => 컴포넌트에게 전달되는 props는 파라미터를 통해 조회할 수 있다. 2) 여러개의 props, 비구조화 할당 => Hello 컴포넌트에 또 다른 props를 전달해보자. name과 color값을 둘 다 설정한다. => Hello.js => Hello.js (비구조화 할당 문법 사용) 3) defaultProps로 기본값 설정 => 컴포넌트에 pr..
React 컴포넌트+ JSX의 기본 규칙
1. React 프로젝트 만들기 => 설치 필요 항목 : Node.js, Yarn, VScode, Git (Powershell사용함) 1.create-react app 설치 npm install -g create-react-app 2.리액트 프로젝트 생성 npx create-react-app begin-react 3. begin-react라는 디렉터리 생기고, 그 안에 리액트 프로젝트가 생성된다. cd begin-react yarn start (or npm start) -> 자동으로 브라우저 열리고, 리액트 아이콘 페이지를 확인 할 수 있다. 2. 리액트 컴포넌트 만들어보기 1) src 디렉토리에 Hello.js라는 파일 만든다. => 리액트 컴포넌트는 함수형태로 작성할 수도 있고, 클래스로 작성할 수도..