React

작업중인 웹페이지에 회원가입 탭이다. 내 쿼리에 들어갈 정보들 중, 자동입력되는 값들을 제외하고 모두 입력받는 폼이다. 우리는 이 정보들이 제대로 들어오게, 쿼리에서 오류를 반환하지 않도록 해야하는 의무가 있다. 그러기위해 보통 유효성검사를 사용한다. 서버쪽 코드에서도 사용할 수 있지만, 보통 클라이언트단에서 처리하기 때문에, 우리는 리액트에서 유효성 검사를 어떻게 하는지 알아보자 React Hook Form React Hook Form은 React 기반의 라이브러리로, 유효성 검사, 폼 제출을 쉽게 처리할 수 있도록 도와주는 라이브러리다. 직관적인 api가 제공되고, 비슷한 기능을 제공하는 Formik 보다 안정적인 성능을 지원한다. Hook 기반으로 폼 상태와 동작을 관리, 'useForm' 을 사용..

리액트 설치하기 리액트는 Node.js를 설치하여 진행할 수 있는 기술스택이다. Node.js (nodejs.org) Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당 주소에서 Node.js를 LTS 버전을 설치하자, 가장 안정적인 버전이 LTS, 가장 최신 버전이 그 옆에 Current버전이다. 보통 안정적인 버전을 사용하기 위해 LTS버전을 많이 선택한다. 설치파일을 받아 실행하여 설치까지 완료됐다면, cmd창에서 설치됐는지 확인해보자 C:\Users\hanra>npm -v 8.19.2 cmd에서 npm-v 를 타이핑했을때 버전 정보가 나온다면 설치가 완료된 것 이다. React 프..

// react-query ajax 요청이 성공, 실패, 자동으로 재시작, 다음페이지 내용 미리 가져오는 등등의 응용사항을 사용하기 편하게 해주는 라이브러리이다. 실시간 sns 같은 실시간 데이터가 빠르게 오고가는 기능을 활용하기 위해서 사용하는 편이다. 기존 라이브러리처럼 설치하여 사용할 수 있다. npm install react-query 설치 후에 사용해주기 위해서는 index.js에서 추가를 해주어야한다. const queryClient = new queryClient(); queryclientprovider로 app를 감싸주고 모두 import해서 사용할 수 있다. let result = useQuery('작명', ()=>{ return axios.get('https://codingapple1...

// state가 object,array 일때 변경법 직접 수정해도 immer.js 라는 라이브러리도 자동으로 설치되어서 알아서 적용해준다. // 장바구니 만들기 수량 + 기능 만들기 let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ] } }) 기존에 존재하는 cart 파라미터에 store.js에서 변경시킬 수 있는 reducer를 추가해주어야 변경시킬 수 있다. let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : '..

// Reudx 컴포넌트간의 공유가 더욱 쉬워진다. store.js에 state를 보관하는 방법은 아래와 같다. let user = createSlice({ name : 'user', initialState : 'kim' }) export default configureStore({ reducer: { user : user.reducer } }) createSlice가 State같은 역활을 해준다. 이를 slice라고 부르는데 니 slice를 사용하기 위해서는 하단 configureStore의 문구에서 반드시 .reducer를 붙여주어야 활성화가 되기때문에 이점을 유의해야한다. let a = useSelector((state) => {return state}) 해당문구를 사용하고 싶은 js 파일에서 입력..

// Detail 페이지에서의, UI 탭 만들기 버튼0 버튼1 버튼2 내용0 내용1 내용2 react-bootstarp 에서 이미 존재하는 ui탭 이미지를 불러와서 detail 페이지에 추가해주었습니다. 코드 내에서 // defaultActiveKey 같은 경우는 해당 페이지를 처음 진입했을때 보여줄 탭을 설정하는 것 입니다. 탭 버튼을 눌렀을때 올바르게 내용이 바뀌게 설정하려면 따로 함수를 설정한 후 코드를 추가해야 합니다. let [tab, tabSet] = useState(0); tab의 상태를 저장할 state를 만든 후 밑으로 돌아와 해당 tab 이 0이면 버튼 0 탭의 내용을, 해당 tab state가 1이면 버튼1 내용이 보이는 방법으로 연산자 혹은 if문을 사용해주도록 합니다. if문을 이..

// axios React에서의 통신은 ajax 처리를 사용한다. install axios 문구로 api를 먼저 설치한 후 진행한다. import axios from 'axios'; { axios.get('주소') .then((결과)=>{ // 주소에 입력된 데이터가 결과에 삽입된다. console.log(결과) // 주소에 저장된 데이터가 콘솔창에 출력된다. }) }}> 해당 방법을 통해 미리 입력되어있던 { title.map((a, i)=> { return })} 해당 데이터를 출력하던 코드에 추가하여, '주소'에 담겨있는 정보를 토대로 새롭게 추가되는 버튼을 만드려고 한다면 이 방법도 가능하다. let [title, setTitle] = useState(data); // 원래 존재하던 title을 ..

// Lifecylce 페이지에 장착되거나 (mount) 업데이트 되거나 (update) 제거되거나 (unmount) 하는 것을 컴포넌트의 lifecylce 라고한다. 중간중간에 간섭이 가능하다 (코드실행) 즉, mount에 걸어둔 코딩은 컴포넌트가 장착될때 같이 실행된다. 그와 같이 업데이트나 제거될때에도 걸어두면 같이 실행된다. useEffect( ()=>{ // mount, updata시 코드 실행 }) 현재 사용법. useEffect는 모든(다른 html) 렌더링이 끝난 후 실행되는 코드내용임 어려운 연산, 서버에서 데이터를 가져오는 작업 같은 경우, 타이머 장착같은 경우를 useEffect에서 사용한다. ※ useEffect와 setTimeout을 이용해 2초 이내에 닫히는 div 박스 설정하기..