programming study/React (37) 썸네일형 리스트형 합성 vs 상속 합성을 사용하여 컴포넌트간의 코드를 재사용하는 것이 좋음 컴포넌트에서 다른 컴포넌트를 담기 어떤 자식 엘리먼트가 들어올 지 미리 알 수 없는 경우 children prop을 사용하여 자식 엘리먼트를 그대로 전달 children 대신 다른 프로퍼티로 JSX를 전달할 수 있음 React 엘리먼트는 객체이므로 prop으로 전달 가능 function Header(props) { return ( {props.children} ); } ------------------------------------------------------------------------- function mainPage(props) { return ( 헤더입니다. ) } 특수화 정의한 컴포넌트를 토대로 특수한 경우에 사용할 컴포넌.. 폼 HTML폼 엘리먼트는 React의 다른 DOM 엘리먼트와 다르게 동작 input, textarea, select와 같은 폼 엘리먼트는 사용자의 입력을 기반으로 자신의 state를 관리 및 업데이트 React에서는 제어 컴포넌트를 사용하여 JavaScript 함수로 사용자가 입력한 데이터에 접근하는 방법이 편리 제어 컴포넌트(Cotrolled Component) React에 의해 값이 제어되는 입력 폼 엘리먼트 React state를 신뢰 가능한 단일 출처로 만들어 폼 엘리먼트와 결합 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어 input class signupForm extends React.component { costructor(props) { super(props); this.state.. 리스트와 Key 여러개의 컴포넌트 렌더링 하기 자바스크립트 배열의 프로토타입 메서드 중 하나인 map과 JSX를 활용하여 여러개의 컴포넌트 렌더링 가능 key: 엘리먼트 리스트를 만들 떄 포함해야 하는 특수한 문자열 어트리뷰트 어떤 항목을 변경, 추가, 삭제할 지 식별하는 것을 도움 엘리먼트에 안정적인 고유성 부여 배열의 인덱스보다는 식별할 수 있는 문자열을 사용하기 map 내부의 엘리먼트에서 key를 넣어줄 것 형제 사이에서 고유하면 됨 연속된 li 엘리먼트 렌더링하기 ... // 각 요소별로 고양이에 대한 정보 객체를 가지는 배열 const cats = [ {name: 'siru', age: 7}, {name: 'nunu', age: 6}, {name: 'mango', age: 7}, {name: 'meonji', .. 이벤트 처리하기 React 엘리먼트에서의 이벤트 처리는 DOM 엘리먼트에서의 이벤트 처리와 상이함 이벤트는 소문자대신 카멜 케이스를 사용 JSX를 사용하여, 함수로 이벤트 핸들러를 전달 HTML vs. React HTML Submit React Submit 기본 동작 방지하기 기본 동작을 방지하기 위해서 리액트에서는 preventDefault를 명시적으로 호출 HTML Submit React 이벤트핸들러가 받는 event 객체는 합성 이벤트 W3C 명세에 따라 정의 됨 ... function submintInfos(e) { e.preventDefault(); console.log('clicked!'); }; ... return ( Submit ); ... 클래스형 컴포넌트에서의 이벤트 핸들러 클래스형 컴포넌트에서의 .. State와 생명주기(2) State를 올바르게 사용하기 1. 직접 State를 수정하지 말기 클래스형 컴포넌트에서 // 임의의 메서드 setNewState() { // 직접 변경하면, 컴포넌트를 다시 렌더링하지 않음 this.state.text = '변경'; } // 아래와 같이 setState를 사용할 것 setNewState() { this.setState({text: '변경'}); } // constructor constructor(props) { super(props); // 직접 state를 지정할 수 있는 곳은 constructor가 유일 this.state.text = '초기값'; } 2. State 업데이트는 비동기적일 수 있음 여러 setState 호출을 단일 업데이트로 일괄 처리 가능 props와.. State와 생명주기(1) State 클래스형 컴포넌트에서 state 정의하기 class Header extends React.Component { constructor(props) { // props를 인스턴스에 전달 // 클래스 컴포넌트는 항상 props로 constructor를 호출해야 함 super(props); this.state = {text: '헤더 컴포넌트 입니다.'}; } render() { return {this.state.text}; }; } 생명주기 메서드 마운팅 : 컴포넌트가 DOM에 렌더링되는 시점 언마운팅 : 컴포넌트가 DOM에서 삭제되는 시점 컴포넌트 클래스에서 생명주기 메서드를 선언하여, 마운트와 언마운트 시점에서 특정 코드를 실행시킬 수 있음 예시 class Header extends React.C.. Component와 props Component > Element 엘리먼트는 컴포넌트의 구성요소 함수 컴포넌트 vs. 클래스 컴포넌트 함수 컴포넌트 데이터를 가진 props 객체 인자를 받아 React 엘리먼트를 반환 JavaScript 함수의 형태 function Header(props) { return {props.headerText} ; } 클래스 컴포넌트 ES6 Class를 사용하여 컴포넌트를 정의 class Header extends React.Component { render() { return {this.props.headerText} } } 컴포넌트 렌더링 사용자 정의 컴포넌트를 나타낼 수 있음 React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견 시, JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달 .. 프론트엔드에서 Component란 본 내용은 10분 테코톡 브랜님의 강의를 토대로 작성하였습니다. 1. 컴포넌트 컴포넌트의 사전적 의미 A part or element of a larger whole, especially a part of a machine or vehicle. 전체의 부분 컴포넌트의 존재 의의 무엇인가를 하나의 덩어리 만으로 구성한다면, 높은 의존성을 가진다. 재사용성이 낮다. 규모가 큰 설계에 적용하기 어렵다. 2. 프론트엔드 컴포넌트 element group을 반환한는 JavaScript 함수 예전 웹 페이지의 html은 일부만 변경하고 싶어도 전체 페이지를 새로 내려주어야 했다. 비효율적 하나의 덩어리 AJAX등장 이후, 필요한 데이터만을 전달받고 일부분만 다시 그릴 수 있게 됨 웹의 성격이 점점 더 동적으로 바뀌.. 이전 1 2 3 4 5 다음