민하코

 React useRef useRef는 useState와 비슷하지만 큰 차이점이 있습니다. useState는 값이 바뀔 때마다 재렌더링이 되지만 useRef는 값이 바뀌어도 재렌더링이 안됩니다. 화면에는 바뀐 값이 나타나지 않지만 재렌더링을 하면 화면에 바뀐 값이 보여지게 됩니다. 또 useRef는 직접적인 DOM요소에 접근 할 수 있습니다. 자바스크립트의 document.querySelector또는 document.getElementById 같은 역할이라고 이해하면 될것같습니다. useRef에는 current 속성이 있습니다.   const countRef = useRef ( 0 ); console . log ( "ref" , countRef . current ); current 속성에는 useRef의 초기값이 들어있습니다. 위의 코드에서는 초기값이 0이므로 콘솔에는 0이 찍혀있습니다. input 태그에 focus 자동으로 맞추기 화면이 Mount(첫 화면 렌더링)이 되었을 때 input 태그에 포커스가 자동으로 맞춰지는 기능을 많이 씁니다. 로그인 화면 같은 경우에 사용자가 마우스를 사용하지 않고 바로 아이디를 입력 할 수 있게 많이 쓰입니다. 이럴 경우에는 초기값이 굳이 필요하지 않기 때문에 null을 주로 많이 쓰지만 테스트 결과 문자, 숫자, 불린형을 넣어도 결과는 잘 나왔습니다. 하지만 초기값이 문자나 숫자, 불린형으로 되어있으면 협업시에 초기값의 의미 때문에 헷갈릴 수 있어서 null이라고 많이 쓰는것 같습니다.   const countRef = useRef ( null );   useEffect (() => {     countRef . current . focus ();     return () => {       countRef . current . blur ();     };   }, [])...

 React map함수에서 key의 중요성 map 함수는 콜백함수를 인자로 받고 콜백함수는 Array에 있는 하나하나의 데이터와 index를 인자로 받습니다. React에서는 map 함수를 쓸 때에 key를 꼭 써줘야 합니다. key를 써주지 않으면 콘솔창에서 각 자식요소들은 고유한 key값을 가져야 한다고 경고메시지가 뜹니다. 브라우저에서는 아무런 영향이 없지만 콘솔창에는 에러메시지 처럼 뜹니다. 이것을 해결하기 위해서는 콜백함수에서 두번째 인자인 index를 key값으로 쓸 수 있습니다. //App.js import "./App.css" ; function App () {   const userList = [     { id : 1 , name : "kim" },     { id : 2 , name : "jung" },     { id : 3 , name : "park" },   ];   return (     < div className = "App" >       { userList . map (( data , idx ) => {         return < p key = { idx } > { data . name } </ p > ;       }) }     </ div >   ); } export default App ; 위의 경우는 배열의 순서나 내용이 변경되지 않을 경우에 쓸 수 있습니다. 하지만 순서나 내용이 바뀌는 상황일 때에는 개별요소를 특정짓는 고유한 key를 사용해야됩니다. 배열에 추가를 하는 경우에는 원래 있던 요소들도 같이 렌더링이 되어 내가 원하는 순서로 나오지 않을 수 있습니다. key가 없는 경우 변경이 필요하지 않은 리스트...

 React useEffect useEffect를 사용하면 Mount(화면에 첫 렌더링), Update(재렌더링), Unmount(화면에서 사라질 때) 이 세가지 조건을 가지고 작업을 할 수 있습니다. useEffect라는 이름은 이 훅이 부수 효과(Side Effect)를 관리 하기 때문에 붙여졌습니다.  그리고 기본적으로 useEffect는 모든 컴포넌트의 렌더링이 끝난 뒤에 실행됩니다. useEffect를 쓰는 경우는 데이터를 가지고 와서 state에 담거나 setTime 같은 함수를 쓸 때이거나 무한루프에 빠지는것을 방지 하기 위해 많이 쓰입니다. useEffect를 쓰지 않는다면 모든 컴포넌트의 렌더링이 끝난 뒤에 실행하기 때문에 데이터를 가지고와서 state에 담고 재렌더링이 된다면 재렌더링이 끝난후 useEffect를 실행하고 state에 담고 또 재렌더링이 되고 useEffect를 실행하면 무한루프에 빠집니다. 혹은 setTime 같은 함수를 쓰게되면 clean up을 할 수 없어서 해당 컴포넌트가 사라져도 setTime같은 함수는 계속해서 돌아가기 때문에 이것을 멈추기 위해 쓰입니다. useEffect는 첫번째 인자에는 콜백함수를 받는데 콜백함수는 다른 함수에 인자로 전달된 함수를 의미합니다. 두번째 인자에는 배열을 받는데 이것을 dependency Array라고 부릅니다.   useEffect (() => {     // 작업   }) 두번째 인자를 생략할 수도 있습니다. 이런 경우에는 재렌더링이 될 때마다 useEffect가 실행되기 때문에 성능이 저하될 수 있습니다.   useEffect (() => {     // 작업   },[ value ]) 두번째 인자에는 배열이 들어간다고 위에서 설명했습니다. 배열에 어떠한 값이 들어간다면 그 값이 바뀔때에만 useEffect가 실행이 됩니다.   useEffect (() => {...

 React useState 리액트로 개발 할 때 함수형 컴포넌트를 사용하면 React Hook을 사용 할 줄 알아야 합니다. 그중에 useState는 리액트의 가장 기본적인 Hook입니다. state는 컴포넌트의 상태라고 합니다. 이 useState 없이는 값을 바꿀 수 없습니다.   const [ 상태 , set상태 ] = useState ( 초기값 ) 배열에 첫번째 인덱스는 변수명을 넣고 두번째 인덱스에는 이 변수를 변경할 수 있는 함수를 넣는데 이 함수는 set함수라고 부릅니다. useState를 쓰기 위해서는 컴포넌트 바깥에서 import를 해와야 쓸 수 있습니다. 자동완성 기능을 사용하면 빠르게 import를 할 수 있습니다.  변수를 html 태그에 포함 시킬 때에는 html 코드에서 중괄호 {}를 넣고 그 사이에 변수명을 입력합니다. 그러면 초기값을 브라우저에 띄울 수 있습니다. import { useState } from "react" ; import "./App.css" ; function App () {   const [ plus , setPlus ] = useState ( 0 );   const addFn = () => {     setPlus ( plus + 1 );   };   return (     < div className = "App" >       < span > 수량: { plus } </ span >       < button onClick = { addFn } > + </ button >     </ div >   ); } export default App ; setPlus는 상태값을 바꿔주는 set함수 입니다. 자바스크립트에서는 ad...

 React 쓰는 이유 React 장점 React는 모바일 App처럼 새로고침 현상 없이 부드럽게 동작합니다. React로 웹을 만들지만 앱 처럼 동작하기 때문에 wep-app 이라고 부릅니다. 웹앱을 쉽게 만들 수 있는 라이브러리는 총 세 가지가 있습니다. React Angular Vue 저 세가지 중에서 가장 많이 쓰이고 있는 것이 React 입니다. React-native로 모바일 앱으로 발행이 쉽고 앱 처럼 빠른 동작 덕분에 쇼핑몰 같은 곳에서는 일반 웹 사이트보다 구매율이 더 높다고 합니다. 그래서 요즘은 React로 웹앱을 많이 만들기 때문에 웹 개발자들의 필수 스킬이 되어버렸습니다. React 단점 React는 문법이 좀 어렵습니다. hook 함수를 외워야 하고 작동 원리를 배워야 합니다. 옛날에는 class문법을 써서 많이 복잡했는데 요즘은 함수형으로 나와서 많이 간편해졌지만 React를 처음 접하는 사람에게는 생소하기 때문에 좀 어렵습니다. 자바스크립트 기초와 HTML/CSS를 알아둬야 하기 때문에 공부하는 기간이 늘어 공부만 하다가 언제 취업하지 하고 포기 하실 수도 있습니다. 저는 퍼블리싱을 1년정도 했었기 때문에 HTML/CSS는 수월했지만 자바스크립트를 잘 몰랐기 때문에 시간이 조금 걸렸습니다. React와 같이 공부 하면 좋은것들 Redux-Toolkit Redux-Toolkit은 Redux를 좀 더 간편하게 쓰기 위해 나온 상태 라이브러리입니다. Redux 말고도 요즘엔 recoil도 많이 쓰이는것 같습니다. Redux-Toolkit(상태라이브러리)을 쓰는 이유 복잡한 props문법 대신 쉽고 깔끔하게 사용 할 수 있습니다. state 변경 관리할 때 씁니다. Next.js React는 프레임워크가 아닌 라이브러리 입니다. 이 라이브러리를 좀 더 간편하게 쓰기 위해 Next.js 프레임워크가 나왔습니다. 그러나 Next.js가 프론트엔드 기술스텍이 아닙니다. 요즘은 인건비 때문에 풀스텍 개발자를 많이 찾는 추세라 프론트엔드 기...