ISFP의 느리게 굴러가는 개발 블로그

2.2 JSX란? JSX는 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼지만 리액트용이기 때문에 공식 자바스크립트 문법은 아니다. 2.3 JSX 장점 보기 쉽고 익숙하다 오류를 바벨이 코드를 변환하는 과정에서 감지해낸다 더욱 높은 활용도 HTML 태그를 사용 2.4 JSX 문법 1. 감싸인 요소 컴포넌트의 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야 한다. → Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 있기 때문! 리액트 v16 이상에서는 태그를 사용하면 됨 2. 자바스크립트 표현 JSX 안에서 자바스크립트 표현식을 쓸 수 있다. 자바스크립트 표현식을 작성하려면 코드를 { }로 감싸면 된다. ..

Redux란? -리액트에서 상태 관리를 효율적으로 하기 위해 만들어진 상태 관리 라이브러리 -상태 관리를 컴포넌트 밖에서 처리하게 됨 1. 액션(action) { type:"TOGGLE_VALUE" //그 외 필요한 값 } -type값은 필수적임 -어떤 값을 업데이트할 때 어떻게 업데이트할지 정보를 지니고 있는 객체 2. Action Creater export function addTodo(data){ return{ type:"ADD_TODO", data }; } //화살표 함수로도 만들 수 있음 export function addTodo=data=>({ type:"ADD_TODO", data }); -액션 객체 생성 (필수적은 아님) 3. Reducer function reducer(state, act..

전편에서 다룬 onClick 함수는 내장 함수지만 사용자 함수도 정의할 수 있다. 이번 강의에서는 사용자가 만든 Component 안에서 사용자 함수를 정의해서 여러 가지 event를 만들어볼 것이다. 1. onChangePage 함수 //App Component에서의 Subject 태그 1 2 3 4 5 6 7 8 Colored by Color Scripter cs 여기서 onChangePage는 사용자가 직접 만든 함수이다. //Subject.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import React, {Component} from 'react'; class Subject extends Component { render(){ return ( {/*최상위태그..

동적인 웹페이지를 만들기 위한 이벤트 1. Event props, state, event가 서로 상호작용을 하면서 역동적인 웹페이지를 만들어준다. 이번 강의에서는 onClick()을 이벤트를 사용해서 글자를 클릭했을 때 state값을 바꿔보도록 하였다. 이전에 작성했던 App Component에서 Subject태그의 부분을 잠깐 살짝 바꿔보도록 하자. 1

1. Props와 State의 차이점 Props - 컴포넌트는 부모 컴포넌트로부터 props를 상속받고 수정이 불가능하다. State - 컴포넌트 내부에서 정의되므로 수정이 가능하고 외부에 공개하지 않는다. 2. state 사용법 1 2 3 4 5 6 constructor(props){ super(props); {/*state 값 초기화*/} this.state={ subject:{title:"WEB", sub:"World Wide Web!"}, } } Colored by Color Scripter cs render하기 전에 constructor 함수를 통해 state값을 초기화해주고 1 2 3 4 cs render 함수 안의 Subject 태그 안에 title과 sub값을 이렇게 this.state를 ..

오늘은 드디어 미루고 미루던 블로그 포스팅을 하는 날 코드를 예쁘게 복사할 수 있는 Color Scripter라는 프로그램을 알게 되었다. 근데 VSCode의 테마가 예뻐서 그대로 복사해오고 싶은데 방법을 모르겠다 1. react를 사용하지 않고 html로 작성했을 때 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 WEB world wide web! HTML CSS Java Script HTML HTML is Hyper Text Markup Language. Colored by Color Scripter cs 순수한 html로 코드를 짜면 이렇게 나온다. 지금은 엄청 간단한 수준이지 만약 소스코드가 길어진다면 더 복잡해질 것이다. 2. 컴퍼넌트 만들기 clas..

DSC Ewha에서 이번에 react 스터디를 시작하게 되었다. 전에 작심삼일(?)로 잠깐 리액트 공부한 적이 있어서 기본적인 개발환경은 구축되어있었다. 스터디는 우선 생활코딩 인강을 보면서 진행하기로 했다. 1. 프로젝트를 진행할 폴더 만들기 생활코딩에서 알려준 대로 폴더를 만들었다. (react라고 만들면 나중에 오류가 생긴다고 함) 2. create-react-app을 통한 개발환경 구축 cd react-app 폴더의 디렉토리 > create-react-app 이 명령어를 치면 온갖 파일을 설치하고 마지막에 Happy Hacking!이라고 나온다ㅋㅋ 귀여움 3. 샘플 웹앱 실행해보기 우선 VSCode를 켜서 create-react-app을 했던 디렉토리의 파일을 열어준다. 그리고 터미널에 npm s..