이다닷

📌useRef란? 리액트를 사용하는 프로젝트에서도 가끔 직접 DOM을 선택해야하는 상황이 발생 할 때가 있다. 그리고 video.js, JWPlayer 같은 HTML5 Video 관련 라이브러, 또는 chart.js 같은 그래프 관련 라이브러 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM에 적용하기 DOM을 선택해 하는 상황이 발생할 수도 있다. => 그럴때 Ref라는 것을 사용한다! 초기 파일은 저번 시간에 완성한 MultiInput.js를 사용한다. ➡️우리가 저번 시간에 만들었던 내용은 초기화 버튼을 누르고나면 포커스가 초기화 버튼에 그대로 남아있게 된다. 우리는 Ref를 이용해서 초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히게 하겠다. UseRef.js import React..

초기 상태 MultiInput.js 추가 import React, {useState} from 'react'; function MultiInput () { const onChange = () => { } const onReset = () => { } return( 초기화 값: 이름(닉네임) ); } export default MultiInput; ➡️두 개의 input이 존재하고, 이름과 닉네임을 입력하면 이름(닉네임)이라는 형식으로 출력이 되도록 구현하기. 📌비 구조화 할당 => 원래 배열을 선언하고 이 배열의 값을 하나하나 변수에 넣어주어야 했다. //배열선언 const animalList = ['CAT', 'DOG', 'TIGER']; //각각 변수담기 const cat = animalList[0]..

InputSample.js 파일 추가 import React from 'react'; function InputSample() { return ( 초기화 값: ); } export default InputSample; ➡️input에 값을 입력하면 그 값이 하단에 나타나게하고, 초기화 버튼을 누르면 input값이 비워지도록 구현하기. 📌e.target.value을 불러오면 input에 담긴 값을 확인 할 수 있다. 📌input의 상태를 업데이트를 할때에는 value값을 필수적으로 지정해줘야한다. InputSample.js import React, {useState} from 'react'; function InputSample() { const [text, setText] = useState(""); c..

➡️ +1, -1 을 수행하는 코드 만들기 시작화면 우선 +1, -1 버튼을 클릭했을때 특정 문구를 뜨게한다. Counter.js import React from 'react'; function Counter() { const onIncrease = () => { SVGAnimatedNumber() } const onDecrease = () => { console.log("-1"); } return( 0 +1 -1 ); } export default Counter; 결과사진 이렇게 버튼이 잘 클릭되는걸 확인할 수 있다. 📌여기서 화살표 함수를 이용하는 방법을 배워볼 수 있다. const 함수명 = (변수) => { return 리턴값; }; 그리고 우리가 하고싶은 동작을 함수로 실현시킨다. 📌컴포넌트에서..

props App.js import React from 'react'; import Hello from './qoffhvjxm/Hello'; import Wrapper from './qoffhvjxm/Wrapper'; function App() { return ( ); } export default App; Hello.js import React from 'react'; function Hello({ color, name, isSpecial }) { return ( { isSpecial ? * : null } 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' } export default Hello; Wrapper.js import React from 're..

Contents 변경 concat 함수 사용 ➡️이러한 방법으로 사용할 수 있는 concat 함수를 사용하여 우리가 입력한 title과 description 값을 추가해 줄 수 있다. ➡️이와같이 push 함수를 사용해도 원소를 추가할 수는 있지만 concat과는 달리 원본이 변경된다. 따라서 concat의 방법을 사용하려고 한다. 📢push대신 concat를 사용하는 이유 -> push는 성능적인 부분에서 많이 떨어진다. App.js 추가내용 var _title, _desc, _article = null; if (this.state.mode === 'welcome') { _title = this.state.welcome.title; _desc = this.state.welcome.desc; _artic..

mode 변경 기능 App.js 추가내용 import Control from "./components/Control"; 추가된 components 하위 파일 Control.js import React, { Component } from 'react'; class Control extends Component { render() { return ( create update ); } } export default Control; ➡️각각 App.js와 Conreol에 내용을 추가함으로써 mode를 변경한다. mode 전환과 onSubmit 이벤트 ➡️create 버튼을 누르면 mode가 create로 바뀌고, ReadContent대신 CreateContent를 띄우면서 title과 description을 직..

컴포넌트 이벤트 만들기 📢페이지가 변경되었을때 이벤트를 실행시키는 이벤트 만들기 App.js import React, { Component } from 'react'; import TOC from "./components/TOC"; import Content from "./components/Content"; import Subject from "./components/Subject"; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { mode: 'read', subject: { title: 'WEB', sub: 'world wide web!' }, welcome: { titl..