소플의처음만나는리액트8 소플의 처음 만난 리액트_실습9 소플의 처음 만난 리액트_실습9 폼이란? - 사용자로부터 입력을 받기 위해 사용하는 양식 제어 컴포넌트 - 사용자가 입력한 값에 접근하고 제어할 수 있게 해주는 컴포넌트 - 값이 리액트의 통제를 받는 입력 폼 엘리먼트 ... - 사용자가 파일을 선택할 수 있게 해주는 HTML태그 - 서버로 파일을 업로드하거나 자바스크립트의 File API를 사용해서 파일을 다룰 때 사용 - 읽기 전용이기 때문에 리액트에서는 비제어 컴포넌트가 됨 여러 개의 입력 다루기 - 컴포넌트에 여러 개의 state를 선언하여 각각 입력에 대해 사용하면 됨 input null value - value prop은 넣되 자유롭게 입력할 수 있게 만들고 싶을 경우, 값이 undefined 또는 null을 넣으면 됨 사용자 정보 입력받기 실.. 2023. 8. 1. 소플의 처음 만난 리액트_실습8 소플의 처음 만난 리액트_실습8 리스트 - 같은 아이템을 순서대로 모아놓은 것 키 - 각 객체나 아이템을 구분할 수 있는 고유값 - id 사용 (주로 많이 씀) - index 사용 (순서가 바뀔 수 있는 경우에는 권장x, 키를 명시적으로 넣지 않았을 때 사용) 여러 개의 컴포넌트 렌더링 - map() 함수 사용 : 각 변수에 어떤 처리를 한 뒤 결과를 배열로 만들어서 리턴함 - map() 함수 안에 있는 엘리먼트는 꼭 키가 필요함 출석부 출력하기 실습 //AttendanceBook.jsx import React from "react"; //배열 생성 const students = [ { id: 1, name: "Chumji", }, { id: 2, name: "Steve", }, { id: 3, name.. 2023. 8. 1. 소플의 처음 만난 리액트_실습7 소플의 처음 만난 리액트_실습7 조건부 렌더링이란? - 조건에 따라 렌더링의 결과가 달라지도록 하는 것 엘리먼트 변수 - 리액트 엘리먼트를 변수처럼 저장해서 사용하는 방법 인라인 조건 - 조건문을 코드 안에 집어넣는 것 - 인라인 if → 논리 연산자 &&를 사용 → 앞에 나오는 조건문이 true일 경우에만 뒤에 나오는 엘리먼트를 렌더링 - 인라인 if-Else → 삼항 연산자 ?를 사용 → 앞에 나오는 조건문이 true면 첫 번째 항목을 리턴, false면 두 번째 항목을 리턴 → 조건에 따라 각기 다른 엘리먼트를 렌더링하고 싶을 때 사용 컴포넌트 렌더링 막기 - 리액트에서는 null을 리턴하면 렌더링되지 않음 - 특정 컴포넌트를 렌더링하고 싶지 않을 경우 null을 리턴하면 됨 로그인 여부를 나타내는.. 2023. 7. 31. 소플의 처음 만난 리액트_실습6 소플의 처음 만난 리액트_실습6 이벤트란? - 사건을 의미 리액트의 이벤트 - 이벤트의 이름을 카멜 표기법으로 표기 - 이벤트를 처리할 함수를 그대로 전달 이벤트 핸들러(=이벤트 리스너) - 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 - 클래스 컴포넌트 → 클래스의 함수를 정의하고 생성자에서 바인딩해서 사용 - 함수 컴포넌트 → 함수 안에 함수로 정의하거나 화살표 함수 사용해서 정의 Arguments(=파라미터) 전달하기 - 클래스 컴포넌트 → 화살표 함수를 사용하거나 Function.prototype.bind를 사용해서 전달 - 함수 컴포넌트 -> 이벤트 핸들러 호출 시 원하는 순서대로 매개변수를 넣어서 사용 클릭 이벤트 처리하기 실습 클래스 컴포넌트 - 클래스의 함수를 정의하고 생성자에서 바인.. 2023. 7. 31. 이전 1 2 다음 반응형
