STUDY/React (52) 썸네일형 리스트형 React | onClick event (+ 컴포넌트 이벤트) 태그 클릭 시 값을 받아와 이미지 파일 경로를 변경해 사진이 변경되도록 하는 이벤트 처리 Blahblah라는 컴포넌트를 잠시 주석처리(import도 주석처리)한 후, Blahblah컴포넌트 안에 있던 태그를 직접 적음 선수 이름을 클릭하면 value라는 어트리뷰트에 담긴 값을 받아와 file이라는 state값을 변경해 이미지 파일이 변경되도록 함 this.state와 this.setState함수의 차이점 this.state는 constructor함수 안에서 사용되어야 하며, 생성자의 역할을 함 this.setState는 생성자에서 설정한 state값을 변경할 때 사용 bind함수 안에 this라는 인자값을 전달함으로써 this를 onClick이벤트 함수 안에서 사용할 수 있게 됨 쉽게말해 bind함수의 .. React | State 사용하기 (+ 리스트와 key) State 값 설정(초기화) State값의 초기값을 설정할 때는 constructor를 이용해야 하며, 이 부분에서 props의 값도 전달받는다! ※ 클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 함 +) 리스트와 key 여러 엘리먼트를 전달 할 때는 배열 형식으로 엘리먼트 모음을 만든다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다. +) 참고한 공식문서 State.. React | 컴포넌트(Component)와 Props 알아보기 컴포넌트(Component) 선언 방법 함수로 정의 function Welcome(props) { return Hello, {props.name}; } Class로 정의 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } Class로 정의할 경우 React.Component를 상속받아야 하며, render() 메서드를 반드시! 사용하여야 함 컴포넌트(Component) 선언하기 ※ 컴포넌트 명은 반드시 첫 글자가 대문자가 되어야 함 소문자로 시작할 경우 DOM으로 인식 export default 컴포넌트명; 을 통해 해당 컴포넌트를 내보낸다. (다른 곳에서 import를 통해 사용할 수 있도록) 내가.. React | Create React App을 이용해 React 시작하기 Create React App · Set up a modern web app by running one command.Set up a modern web app by running one command.create-react-app.dev 1. npm(혹은 npx)을 이용하여 Create React App 설치 npx를 이용하면 앱을 일회성으로 설치하고 실행한 뒤 자동으로 지워지므로 항상 최신버전으로 사용할 수 있다고 함 2. 폴더 생성 후 앱을 이용하여 개발환경 구축 create-react-app react-sample로 해도 됨! 3. 샘플 실행하기 터미널 혹은 command를 이용$ npm start * index.html, index.js, package.json파일을 제외한 나머지 파일들은 수정.. 이전 1 ··· 4 5 6 7 다음
