useState
![[React] Deep Dive 모던 리액트(8) useState & useEffect](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoWMzF%2FbtsCnFk7OOb%2FGenCQ1sa7nJDoTJ9DDQok0%2Fimg.png)
[React] Deep Dive 모던 리액트(8) useState & useEffect
이제부터 리액트의 훅에 대해서 제대로 알아보고자 한다. 훅은 클래스형 컴포넌트에서만 가능했던 state,ref 등 리액트의 핵심 기능을 함수에서도 가능하게 만들어 준 것이다. 리액트로 웹 서비스를 만드는 개발자라면 훅이 어떻게 동작하는지에 대해서는 이해할 필요가 있다. useState 함수형 컴포넌트 내부에서 상태를 정의하고 이 상태를 관리할 수 있게 해주는 훅이다. 아래처럼 생겼다. import {useState} from 'react' const [state,setState] = useState(initialState) useState()의 인수로는 state의 초깃값을 넘겨주면 된다. 만약 useState를 사용하지 않으면 어떻게 될까? import React from 'react' const Co..
10_리액트_input상태,useRef
이번에는 input버튼으로 값을 읽어오고 표현하는 법을 통해 input상태 관리법을 공부했다. 위처럼 글을 쓰면 그 값을 표시하고, 초기화를 눌렀을때 초기화가 되게하는 방법이다. 저번에 만들었던 리액트 파일 그대로 사용하였다. 우선, src파일에 InputSample파일을 추가한다. //App.js import React from 'react'; import './App.css'; import InputSample from './InputSample'; function App() { return ( ); } export default App; App.js에는 단순히 만든 InputSample을 표시한다. import React, {useState} from 'react'; function InputSam..
10_컴포넌트_JSX,props,useState
JSX문법 리액트에서 컴포넌트 생김새를 정의하는 문법으로 HTML처럼 생겼지만 사실 자바스크립트이다. 우리가 HTML형식으로 만들어주면 babel이 이것을 JS로 바꾸어준다. 위처럼 말이다. 이때 이 변환을 사용하기 위해서는 몇가지 문법을 꼭 지켜주어야 정상 변환이 된다. 1. 태그를 꼭 닫아주어야 한다. 리액트에서는 input이나 br태그같은 태그또한 닫아주어야 한다. 2. self tag 과같이 내용없이 닫히는 태그는 로 변환하여 쓸 수 있다. 3. function App() { return ( 나는정민규. ); } 위처럼 를 사용하여 불필요한 div태그를 줄일 수 있다. 4. () return 이후 ()는 가독성을 위해 존재하고 굳이 없어도 작동한다. 5. 변수 import React from 'r..