본문 바로가기

전체 글78

[React.js] 초보자도 쉽게 따라하는 checkbox defualt로 체크 하기 안녕하세요. 리엑트 하다가 checkbox 사용 예시는 많은데, 기존에 데이터를 미리 디폴트로 체크 해놓아햐 하는 경우가 발생 합니다. 일단 체크박스 생성을 합니다 그 다음 해당 input에 해당 value값을 넣어 줍니다 예를 들어, 우리는 기존의 List 배열과 , 체크된 리스트를 갖고있을 checkList 배열을 선언해 줍니다 const [list, setList] = usestate(['a','b','c','d']); const [checkedList, setCheckedList] = useState([]); 위 체크 박스를 반복문으로 돌려서 체크박스를 생성 해 줍니다 list.map((item) => { return( ) } ); 이렇게 생성해주면 value값은 어디에도 나타나지않고 hidden.. 2022. 11. 28.
[React.js] dotenv 라이브러리로 .env .dev .local 환경 변수 설정 dotenv 파일을 일단 설치 해 줍니다 yarn 혹은 npm 설치 방법 $ npm i dotenv $ yarn add dotenv dotenv 사용 예시 입니다 import { config } from "dotenv"; config(); export const API = `${process.env.REACT_PROTOCOL}://${process.env.API_URL}`; config를 import 해준 후 , 해당 JS 파일에 config(); 선언 후, process.[환경변수파일명].[선언된규칙] 으로 사용할 수 있습니다. 예시 : process.env.REACT_PROTOCOL 그럼 .env 파일을 생성 후, 아래와 같이 선안해줍니다. REACT_PROTOCOL="http" API_URL="12.. 2022. 11. 22.
[강릉 맛집] 세인트존슨 호텔 근처 내돈내산 솔직 후기 고선생화덕생선구이 안녕하세요. 워케이션을 하게 되었습니다. 당일 워케이션 검색해서 호텔 예약하고 아침에 바로 출발하여 점심에 도착~~ 세인트 존슨 호텔 근처에 맛집을 찾아 다녀왔습니다. 내 돈 내산 강릉 맛집 리뷰입니다. 강릉 하면 생선구이 생각이 나서 (?) 검색해서 왔습니다. 이미 강릉 맛집으로 유명하더라고요. https://place.map.kakao.com/942038293?service=search_pc 고선생화덕생선구이 강원 강릉시 해안로 286 2층 (강문동 27-2) place.map.kakao.com 이미 유명한데 '고선생 화덕 생선구이' 식당에 왔습니다! 일단 창가에 모두 근처에 앉아야 탁 트인 뷰입니다 (창문이 살짝 더럽... 지만...) 실제로 보면 탁 트이고 멍 때리기 좋은 풍경이었습니다. 메뉴는 .. 2022. 11. 18.
[React.js] useLayoutEffect 와 useEffect의 차이점(리스트 초기 화면 깜빡임 해결) react를 사용할 때 useEffect로 초기 데이터를 불러올 시 loading 여부를 확인해야 합니다. List 페이지를 구현할 때 "데이터가 없습니다"가 뜬 다음 데이터가 뜨는 현상을 자주 겪었을 것입니다. 보통 loading 플래그를 사용해서 이를 해결했는데, 이 과정 없이 해결할 수 있는 방법이 useLayoutEffect입니다. useLayoutEffect 사용방법은 useState와 동일합니다. 차이점을 간략히 설명드리겠습니다. 예를 들어, useEffect(()=>{ setData("data"); }, [ ] } 이렇게 초기 함수를 선언해주면 data은 화면이 모두 띄운 후 작동하게 됩니다. 즉, "데이터가 없습니다"를 화면에 띄운 후 깜빡임으로 변하면서 "data"를 띄웁니다 하지만 us.. 2022. 11. 16.

티스토리툴바