본문 바로가기

React

(16)
리액트 소수점을 표현하고 싶을때 toLocaleString() 숫자를 나타나게 하다가 숫자에는 늘 , 가 있어야 한다고 생각해서 찾아보니 불러오는 데이터에서 .toLocaleString( ) 만 추가하면 된다는걸 알았다. 예시 코드는 아래. if (data && data.total !== undefined) { set({ total: data.total.toLocaleString(), detected: data.detected.toLocaleString(), repaired: data.repaired.toLocaleString(), received: data.receivedData.toLocaleString(), });
zustand를 사용하면서 알게된점들, 콜백 함수의 정의 재정립 , 상태관리 변수(인자값) 에 대해 알아보자. zustand를 사용하면서 헷갈리는 것들이 있었다. 예를 들면 zustand가 아니고 원래 상태관리를 할때에는 아래처럼 쓰는데 const [count, setCount] = useState(0); // 이전 상태에 의존하여 상태를 업데이트 setCount(previousCount => previousCount + 1); zustand에서는 이런식으로 사용하는 부분이다. set(state => ({ count: state.count + 1 })); 이부분에서 내가 헷갈렸던 것은 previousCount 부분이다. 여기서 이 변수가 어디서 나온건지도 헷갈리고 뭘하고싶은지가 정립이 안되었었다. 여기서 나오는 previousCount는 결국 내가 지정하는 변수명이다. 즉 const [count, setCount..
리액트 map 함수, 반복문, for문 대신 사용 map 함수 사용법 map함수는 보통 array자료를 반복할때 사용된다. 리액트에서는 { } 중괄호 안에 사용하는건 for반복문이 아니라 map반복문을 사용해야 한다. for 문법은 JSX 안에서 사용할 수 없어서 사용시에는 바깥에서 쓰면 된다. [1,2,3].map((a)=>{ console.log(a) }) // a라는걸 array에 반복,순차적으로 넣어준다. // a,a,a [1,2,3].map((a)=>{ return '123' }) // return을 사용하면 123이라는 결과를 [123],[123],[123] 이렇게 넣어준다. // return안에 넣는 값이 길어지면 ( ) 를사용해서 안에 넣어주면 된다. 아래는 예시이다. 글제목이라는 array 자료 길이만큼 반복해주는것. let [ 글제목 ..
리액트 동적 ui 만들기 모달창만들기 리액트 동적 ui 만들기 1. html css로 미리 디자인 완성 2. ui 현재 상태를 state로 저장 3. state에 따라 ui가 어떻게 보일지 작성 [조건문] html css로 미리 디자인 완성 function Modal(){ return( 제목 날짜 상세내용 ) } .modal { margin-top: 20px; padding: 20px; background: #eee; text-align: left; } // 컴포넌트 작성 ( html / css 작성 ) ui 현재 상태를 state로 저장 let [modal, setModal] = useState(false); // 현재상태를 state에 보관. // false,true가능 , 숫자가능 state에 따라 ui가 어떻게 보일지 작성 [조건문]..
components 사용하는 이유, 언제사용해? 리액트 컴포넌트 사용법 react 를 사용하다 보면 components를 언제 사용하는지 궁금할때가 있다. components 문법이란 아래와 같다고 보면된다. import { useState } from 'react'; import './App.css'; function App() { let [글제목] = useState(["여자코트추천", "남자코트추천", "이것저것추천"]) let [따봉, 따봉변경] = useState(0); return ( { 글제목[0] }*{따봉} 2월 17일 발행 { 글제목[1] } 2월 17일 발행 { 글제목[2] } 2월 17일 발행 ); } function Modal(){ return( 제목 날짜 상세내용 ) } export default App; 여기에서의 컴포넌트는 맨 아래에있는 Moda..
redux ? tookit? 어떻게 사용하고 이게 뭐야? useSelector는? react를 사용하다보면 redux라는걸 많이 들어봤는데 간단정리를 해놓자! redux란 useState의 기능과 비슷한 거라고 생각하면된다. (잠시저장의 너낌쓰) props를 하면 부모 -> 자식관계로 만 전달이 가능한데 이게 대규모 프로젝트가 된다면 하나하나 props를 해주기 번거로우니 따로 폴더안에 저장을 해서 필요할때마다 꺼내쓰면 된다. 그럼 props를 왜 사용하냐? 둘의 차이는 소규모 프로젝트는 그냥 props를 사용하면 편리하다 큰 프로젝트시 redux를 사용하자 왜? redux를 사용하는 문법이..ㅎㅎ 상당히 길어서 그렇다. 우선 redux 설치법과 사용법은 아래에 적어두자. 터미널에 아래 코드 작성 [ 오류가 가끔뜨는 경우는 react의 버전이 맞지 않기때문 대부분 버전문제이니 확인 필..
API , REST API, RESTfull API 가 뭐야? 헷갈려 헷갈려!!!! 나는 API, 특히 RSTFULL API가 제일 헷갈렸다. 인터넷에 서치를 해봐도 내 머리로 이해할수 있는 속시원한 답변이 없었다! 나는 진짜 간단하게 이야기 해야 이해가 되는편인데 .. ㅠㅠ 그래서 정말 많이 찾아본 결과 내가 이해한건 대충 이런 맥락이다. API - API란 애플리케이션과의 상호작용을 할수 있게 하는 소통역할을 하는것,, REST API - 구조적으로 리소스를 정의하겠다. HTTP 리소스의 설계 약속이다. 예를들면, 주소창의 /(슬래시)는 끝에 적지 않는다. PUT / POST / DELETE / GET 이런식의 내용을 적어주는 것 RESTfull API - 위의 REST 의 설계가이드를 따라서 API를 만드는것! 그럼 why? 따라하냐!! -> api 주소 자체만으로 어떤걸 만드는지..
LifeCycle이 뭐야? 생명주기가 뭔데 LifeCycle 이란 생명주기를 뜻한다. 생명주기란 컴포넌트가 처음 생길때부터 없어질때까지의 주기를 이야기 한다. 이 일련의 과정들에는 장착 (mount) 업데이트 (update) 제거 (unmount) 위 세가지의 일련의 과정들을 거친다. 근데 여기에 이게 왜 중요한데? 라고 할수있는데 이주기들을 알면 간섭을 하는 타이밍을 적절히 알수가 있다. 예를 들면 useEffect를 사용해서 간섭을 하는거다. useEffect는 mount, update 시 사용되어지는데 이 주기를 이용해서 언제 로딩되어야 하는지를 정할수있다. 그래서 로딩이 오래걸리는 것들은 useEffect를 사용해서 html이 로딩된 후 로딩되어지게 코드를 작성하면 조금더 효율적으로 사용이 가능하다.
useParams 가 뭔데? 대체 뭔데! useParams는 리액트 훅중 하나이다. 이건 언제쓰냐고? 유저가 URL파라미터에 입력한걸 가져올때 사용된다. App.js안에 있는 :id (url파라미터) 이걸 가져오기 위해서 useParams를 사용해준다 let { id } = useParams(); let 찾은상품 = props.product.find((x) => x.id === id); 프롭스를 해서 find로 찾아주고 x.id 현재 html에있는 : id값과 데이터(product) 안에있는 id값이 같으면이라는 뜻 이걸 이렇게 선언해주고 {찾은상품.title} {찾은상품.content} {찾은상품.price} 이렇게 html에 작성해준다. 결국엔 몇수십개의 페이지를 만들때 사용하면 좋다. 또한 id 값을 비교하고 오류나는것을 방지해준다.
styled-components 가뭐야? styled-components가 뭐냐면 css파일에 가지 않아도 react환경에서 현재 페이지 안에서 사용할수있는 CSS 라고 보면된다. 이 스타일의 장점으로는 현재 페이지에서만 작용이 된다는점이다. 다른 컨포넌트에 오염이 안된다. 그리고 또한가지의 장점으로는 로딩 시간이 향상이 된다. 그래서 어떻게 사용되냐고? let box = styled.div` backgroud: yellow; padding: 20px; color: black; ` ` 백틱을 사용해서 안에 내용을 넣어주면된다. 그리고 html안에는 로 import시켜주면 끝!