RCA9 React12일차-Hook Hook에 대해서 알아보자 Hook은 정말 많은 도움이 된다. 우리가 일반적으로 자주쓰지만 길어지는 것을 한단어로 압축해서 코드를 줄여 주었다. ㅎㅎ 정말 편하다. 그럼 훅을 이용하여 코드가 어떻게 줄여 지는지 알아 보자 create react app만들고 npm start 하자 그리고 이렇게 src/component/example.jsx를 만들자 import React from "react"; class Example extends React.Component { state = { count: 0, }; render() { return ( {this.state.count}입니다. 클릭 ); } click = () => { this.setState({ count: this.state.count + 1 }.. 2022. 1. 31. React11일차-controlled/uncontrolled component controlled/uncontrolled componenet 에 대해서 알아보겠습니다. 바탕화면에서 vscode열어서 create-react-app 만들고 해당폴더에서 vscode열고 터미널 열어서 npm start해 놓아주세요 src/controll폴더 만들고 안에 controlled.jsx 만들어 주세요 오늘은 class를 만드는 것이니 정신차리고 해봅시다 ㅎㅎ 다들 설날 잘보내세요 ㅎㅎ 저는 주말이라서 그냥 할거도 없고해서 공부하면서 글도 올리고있습니다. 만든 파일안에 이렇게 기본적인 형식을 만들어 봅시다 class Controlled extends React.Component {} 이거는 Controlled라는 클래스를 만드는데 React.Component에서 상속을 받아서 만들겠다 라는 의미입.. 2022. 1. 30. React10일차-antdesign 오늘은 antdesign을 알아보겠다. 이것은 흔히 부트스트랩 같이 이해하면 편하다 디잔인을 미리 여러개 만들어놓고 다른사람이 만들어놓은걸 편하게 끌어다 쓰는 개념이다. 이제 스스로 react-create-app을 만들어서 거기에서 새터미널을 열어보자 (힌트 npm아니고 npx다) 그다음 npm i antd 로 설치해보자 그다음 src/index.js로 이동(App.js 아니다) 그리고 import 모인곳에 import "antd/dist/antd.css" 입력 그럼 이제 antddesign을 입력하면 제대로 css가 적용되고 나올것이다. 이제 https://ant.design/ 여기 antdesign 사이트로 이동해보자 이제 여기서 내가 원하는걸 찾아서 쓰면된다. 우선 Components 클릭 이런창이.. 2022. 1. 29. React10일차-reactshadow 우선 바탕화면에 vscode 열고 npx create-react-app 폴더이름 해서 엔터치고 그폴더로 드가서 새터미널 열어보자 그다음 npm i react-shadow src/App.js 에다가 import root from "react-shadow"; 추가하고 retrun 내부를 내부에 집어넣기 바로위에 추가하고 function 위에 const style = `p{color:red}`; 추가 그러고 npm start 해보자 이런식으로 app.css는 적용이 안되고 p태그 안에 글자가 빨간색으로 되있을꺼다 자 이게 왜 이렇게 일어나는지 알아보면 react-shadow를 통해서 root를 import 하고 모든요소를 root.div안에 넣었다. 이렇게 되면 외부에서 오는 css요소에 영향을 받지 않는 기.. 2022. 1. 29. 이전 1 2 3 다음
