본문 바로가기

분류 전체보기

(75)
리액트 소수점을 표현하고 싶을때 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..
form , input 태그 속성들 , autocomplete, label for 사용법, required , Post , get 요청 사용, method , action url 사용법 form 태그 속성들 form = [{ action : 전송될 url method : POST, GET방식 선택 }] input 태그 속성들 type input = [{ text: 텍스트 , password: 비밀번호 , email: 이메일 , autocomplete: 자동완성기능 , required: 필수 입력란에 추가 , }] +@ 에는 for를 사용해서 하나의 묶음으로 표현한다. 이름: // input 의 id 와 label 의 for가 같아야 한다 // 즉, 묶고자 하는 것와 id와 for가 같아야 한다는 뜻.
( ) => { } 버튼을 두번 클릭해야 실행되는 이유 , 이벤트처리 {alert("블로그입니다.")}} /> 위, 아래의 코드의 차이는 ( ) => { } 위의 코드는 컴포넌트가 렌더링될 때 alert 함수가 즉시 실행되고, 버튼을 클릭했을 때는 아무런 반응이 없게 된다. 아래 코드는 버튼을 클릭할 때 마다 실행이 된다. 즉, 이벤트처리는아래 코드를 작성하는게 좋다.
오류해결 ) 코드를 똑같이 복사했는데 작동이 안돼요. 경로 문제일수..있다. 코드복붙 작동안돼 첫번째 ul - 1번 - 2번 두번째 ul - 1번 - 2번 이렇게 있을때 두번째 1번과 2번을 첫번째에 같게 적용을 해야하는 상황. + 각각의 ul 안에있는 데이터는 같지만, 카테고리만 다르게 표현되게 설정 그러려면 우선 가장먼저 해야하는건 두번째 1번과 2번은 첫번째로 복사를 하고 나머지 카테고리만 제거하고, 보여지게 하면된다. 근데 이 과정에서의 첫번째오류 - 두번째의 카테고리를 바꾸면 첫번째 카테고리도 동시에 바뀐다는점 -> 해결책 : 각자 폴더에 내용은 같지만 불러오는 파일은 다르게 불러오기 , 즉 복사는 하지만 불러오는 폴더를 다르게 설정하기 이렇게 했는데 두번째가 불러와 지지 않음.... 죽어도...죽어도....... 이틀을 찾았다. 왜 내용이 같은데 적용이 안될까? 왜지? api문제인가? ..
리액트 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 [ 글제목 ..
include( ),indexOf( ) 함수 string 특정 문자 위치 찾기 함수 include( ) 문법 원하는 내용을 확인할때 사용한다. 내가 원하는 숫자나 문자가 data 안에 들어가냐 안들어가있냐의 차이. 아래 코드처럼 작성하해서 사용하면 된다. let data = [1, 2, 3, 4]; if (data.includes(3)) { console.log("true"); } else { console.log("false"); } 여기서 주의해야할 점은 includes( ) 는 ie 에서는 작동이 안될수도 있다. 그럴때 사용하는것이 indexOf( ) 함수 찾는 문자열이 없으면 -1 을 반환. 찾는 문자열이 있으면 첫번째 글자의 순서를 반환. const string = 'Hello wolrd'; console.log(string.indexOf('wolrd')); // 6 conso..
리액트 동적 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..
함수 선언식, 표현식 차이 : 호이스팅 함수는 선언식과 표현식으로 나뉜다. 선언식 function 선언식( ){ 동작코드 } 표현식 var = 표현식 ( ){ 동작코드 } 표현식( ) 선언식의 경우 호이스팅이 가능해 맨상단으로 끌어올려진다. 만약 호이스팅에 관해 몰라도 변수나 함수를 맨 상단에 작성해주면 왠만한 코드들은 에러없이 잘 작동됨.