Fe-Dev/React.js

React.js를 공부하면서 useRef에 대해 간략히 정리하는 글이다. 기능 설명을 위해 위와 같이 간단한 화면에서 첫번째 input태그와 두번째 textarea 태그의 텍스트가 특정 길이 미만일때 저장버튼을 클릭시 focus가 되고 return 시키려한다. //jQuery로 구현시 const authorInput = $('input[name=author]'); if(authorInput.value.length < 1){ // 길이가 1보다 작을 경우 focus authorInput.focus(); return; } 물론 자바스크립트에서 제공하는 document.getElement나 위와 같이 jQuery를 사용하여 특정 element에 접근하여 길이 체크 및 focus가 되도록 할수 있지만 react..

react.js 를 공부하면서 짚고 넘어가야할 중요한 기능인 props에 대해 간략히 정리하는 글이다. react에서 props는 프로퍼티의 줄임말로 상위 컴포넌트에서 하위 컴포넌트에 값을 전달할때 사용하는 기능이다. 이전 게시글(State)에서 사용하던 Counter 코드를 예시로 활용해보려 한다. 1. Props 를 사용 및 추출 import MyHeader from './MyHeader'; import Counter from './Counter'; import React from 'react'; function App() { const number = 5; return ( ); } export default App; 위 예시코드는 상위 컴포넌트인 App 에서 하위 컴포넌트인 Counter 에게 pr..

react.js 에서 state의 사용법을 간략히 정리하는 글이다. react.js 에서 state는 컴포넌트가 동적으로 가질 수 있는 상태를 말한다. react 엘리먼트를 반환하는 함수형 컴포넌트에서 특정 상태 값을 실시간으로 변경하기 위해 useState 라는 React Hook을 사용할 수 있다. import React, {useState} from 'react'; const Counter = () => { console.log("counter 호출"); // count의 상태(값)이 바뀔때마다 console에서 호출되는것을 확인할 수 있다. const [count, setCount] = useState(0); const onIncrease= () => { setCount(count + 1); } ..

react.js 를 공부하면서 알고 넘어가야할 JSX의 간단한 사용법을 정리하는 글이다. react에서는 공통적으로 재사용해야하는 요소들을 컴포넌트별로 분할해서 사용하게 되는데 이 컴포넌트를 만들때 유용하게 사용되는 문법이 JSX이다. ✔︎JSX를 사용하는 이유 JSX를 사용하지 않고 React에서 위 화면처럼 hello world! 를 표출하기 위해서는 const hello = React.createElement("div", { className: "App"} , React.createElement("h1", null, "hello world!")); ReactDom.render(hello, document.getElementById('root')); React.createElement 로 컴포넌트를 ..