JavaScript/React (8) 썸네일형 리스트형 react 유용한 개발 툴 React Developer Tools 리액트 개발자라면 꼭 쓰는!chrome web store에서 react dev검색하면 React Developer Tools 다운로드할 수 있다. 이렇게 리액트로 만들어진 홈페이지면 불도 들어오고, 개발자 툴에서 어떤 방식으로 만들어졌는지, 구성된 건지도 확인할 수 있음! 디버깅도 가능 Reactjs code snippets컴포넌트를 일일이 수동적으로 하지 않아도,"rcc 엔터"만 누르면 바로 리액트 컴포넌트가 생길 수 있도록 도와주는 툴입니다! 이것을 설치하게 되면, React 관련 템플릿을 단축키로 작성할 수 있다.rcc→class component skeletonrrc→class component skeleton with react-redux connectrc.. 프로젝트 폴더 트리 설명 yarn create-react-app test를 하면 다음처럼 폴더 트리가 구성된다. 아래 사진은 VisualStudioCode에서 볼 수 있는 폴더 트리. test ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js └── setupTests.js 트리 구조를 간략하게 살펴보자. .gitignore 여기에 명시된 폴더나 파일은 깃에 공.. create-react-app create react-app 리액트를 개발하는 수 많은 개발자들이 공통으로 사용하는 유용한 툴을 자동으로 설정해준다. 리액트도 적극적으로 이 툴 사용을 권장하고 있다. 자동으로 만들어주는 툴 말고, 직접 세세한 컨트롤 하고 싶다? 그 때 좀 더 세세히 배우면 될 것 같다. 공식 홈페이지https://create-react-app.dev/docs/getting-started/ 여기 들어가면 실행할 수 있는 방법이 설명 되어 있다. 어떤 말인지 대충 보도록 하자.npx create-react-app my-app: npx - 패키지 실행할 수 있는 툴.: create-react-app - 패키지 실행!: my-app - 프로젝트 이름 설정npm start: 실행하세용~! create-react-app에 Ho.. 리액트 시작하기-기본적으로 필요한 툴 리액트를 시작하기 위해 필요한 툴을 먼저 받아보자. 터미널, node.js, git, yarn 네 개를 먼저 받아보자.터미널 설치윈도우에서는 window+R키를 누르고 cmd를 실행시키면 기본적인 터미널이 있다.기본 툴 사용해도 되고, 아니면 조금 더 예쁜 거 쓰고 싶으면 cmder을 다운로드해서 사용하면 된다.https://cmder.net/cmder을 설치하면 git이 같이 딸려와서 추가되기 때문에 git을 따로 설치해주지 않아도 된다. 깃 설치소스 코드의 버전을 관리할 수 있고, 깃허브나 깃랩에 올릴 수가 있다.git 공식 사이트로 가서 다운로드 하면 된다.잘 다운로드 됐는지 확인하는 방법은 터미널에서 git —version을 적으면 확인할 수 있다.https://git-scm.com/ node.j.. 11. 합성 vs 상속 합성과 상속이란? 객체지향에서 기능 재사용을 위해 사용하는 대표적인 기법이다. 상속(Inheritance)? 부모클래스가 구현해둔 무언가를 자식클래스가 상속(extends)해서 무언가를 구현 하는 방법으로 객체 지향 프로그래밍(OOP)에서 많이 사용하며, 자식클래스는 부모 클래스에 정의해둔 field나 method를 그대로 받아서 사용할 수 있다. 내용을 추가(혹은 확장)해서 사용하는 것도 가능하다. class Vehicle{ constructor(name, type){ this.name = name; this.type = type; } getName(){ return this.name; } getType(){ return this.type; } } class Car extends Vehicle{ con.. 6. 이벤트 처리 React 이벤트 처리 React의 이벤트 처리방식은 Vanila JS의 이벤트 처리 방식과 거의 유사하다. 몇 가지 차이만 알고 있으면 된다. 차이 1] 기본 문법 React 이벤트는 소문자 대신 카멜 표기법(camelCase)를 사용한다 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다 HTML에서 작성 Active Lasers React에서 작성 Activate Lasers 이벤트 onclick대신 onClick으로.. 마치 낙타(camel) 혹 처럼 쓴다. " " 문자열 대신 { } 을 사용하여 JSX로 전달한다. 차이 2] 이벤트 기본 동작 방지 React는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 호출해야한다. 비교를 위해 새 페이지.. 5.1 State 올바르게 사용하기 직접 State를 수정하지 않기setState를 쓰지 않고 직접 State를 수정한다면? React가 state가 변경된 걸 인지하지 않는다. 그러면 render()를 호출하지 않을거고, 아무런 변화가 없음.ㅜㅜ 직접 state를 지정할 수 있는 건 constructor에서 this.state로 초기 값을 줄 때 뿐... State 업데이트는 비동기적일 수 있다React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리하기도 한다. this.props와 this.state가 비동기적으로 업데이트 될 수 있기 때문에 state 계산 시 값에 주의해야 한다.//실패 예 this.setState({ counter: this.state.counter + this.props.increm.. 5. State와 생명주기 State란? React 컴포넌트에서 다루는 데이터는 Props와 State 두 가지로 나뉜다. Props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것으로 "읽기 전용"이다. 자식 컴포넌트는 값을 받기만 하고 직접 수정할 수 없다. 이 점을 이용해서 변경되지 말아야 할 데이터를 효율적으로 관리할 수 있다. State는 컴포넌트 자기 자신이 갖고 있는 값이다. 내부에서 선언하고 내부에서 변경할 수 있다. props와 비교해서 "쓰기 전용"이라고 볼 수 있다. React doc 예시 React 공홈에 나와있는 문서 내용을 따라가보자! 3. 엘리먼트 렌더링에서 만든 시계 예제를 살펴보자. function tick(){ const element=( Hello, World! It is {new .. 이전 1 다음
