스터디에서 책은 '소플의 처음만난 리액트'로 정하였다. 챕터별로 정리를 시작해 보자 사실 한번 글을 날리고 다시 쓰는 거라 대충 쓰겠다..🫠 휴 노션에 쓸걸. 챕터는 아래와 같다. 0-3까지의 정리이다. chapter 0. 준비하기 Chapter 1. 리액트 소개 Chapter 2. 리액트 시작하기 chapter 3. JSX 소개 Chapter 0. 준비하기 여기는 사실 정리할 필요는 없..다 정리하자면 아래와 같다. 이미 안다고 가정하고 넘어간다. html css javascript 개발 환경 설정하기 그래도 여기에서 기억할만한 개념을 정리하자면 SPA: Single Page Application 말 그대로 하나의 페이지만 존재하는 웹사이트 우리가 지금까지 아는 것들, 사용하던 것들은 Multi Pag..
개발 노트/React
유저가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 합니다. 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷합니다. 다만, 주의사항 1. 이벤트 이름은 camelCase로 작성 ex) onclick -> onClick 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 이벤트 핸들링 EventPractice.js import React, { Component } from "react"; class EventPractice extends Component{ render(){ return( 이벤트 연습 { console.log(e); } } /> ); }..
컴포넌트 컴포넌트 생성하는 방법 1. scr 디렉터리 내부에 -(이름 자유).js 파일 생성 2. 컴포넌트 초기 코드 작성 import React,{Component} from 'react'; class Content extends Component{ render(){ return( {this.props.title} {this.props.sub} ); } } export default Content; 모듈 내보내기 export default MyComponent; 모듈 불러오기 import props props는 컴포넌트 속성을 설정할 때 사용하는 요소이다,. props 같은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(현 상황에서는 App 컴포넌트가 부모 텀포넌트)에서만 설정할 수 있다. MYComp..
생활코딩 리액트 강의를 듣다가 먼저 책으로 공부하면서 정리하는 게 이해가 더 쉽다고 생각했다. 그래서 티스토리에 리액트 정리를 하면서 공부를 할 것이다:) 작심삼일 안 되게 해주세오,,, 책은 '리액트를 다루는 기술 요약'입니다. 리액트에 대해 먼저 알아보자 리액트란? 리액트는 자바스크립트 라이브러리로 오직 유저 인터페이스를 만드는 데 사용합니다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V만 신경 쓰는 라이브러리입니다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트라고 합니다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있습니다. 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다. 어떤 UI 관련 프레임워크, 라이브러..
