프론트엔드
-
[React] Styled component프론트앤드/[React] 2023. 2. 26. 15:21
Styled component를 자습했다... 솔직히.. 왜쓰는지 모르겠다. 가장 최근 5년간 가장 인기있는 라이브러리라는데... 왜..? .. 다 이유가있겠지... 일단 내 손에 안익어서 그런가보다 하고... 그냥 냅다 정리부터 해본다. ㅠ 현업에서 일하는 친구도 스타일 컴포넌트를 쓴다고 한다.. 일단 className을 지정안해도 되고 손에익으면 너무 편리하다고하는데..? 공부나하자..ㅠ Styled Component css, Sass에서는 별도의 css, sass 파일을 생성하여 js파일에 import해서 사용했지만, 스타일드 컴포넌트는 스타일링을 할 때 ES6의 Tagged Templeate Literal 문법을 이용하여 js파일 안에서 선언해서 사용할 수 있다. 적용 방법 : styled 객체에..
-
[React] useState 조건부 렌더링프론트앤드/[React] 2023. 2. 22. 22:01
조건부 렌더링 사용하기를 간단하게 해 보았당 :) 구현해야 하는 것 const Review = () => { const [open, setOpen] = useState(false); const reviewOpen = () => { setOpen(!open); }; useState 를 이용해서 false 일때는 text가 안보이게, true때 보이게 설정하였다. 배송도 빠르고 정말 좋아요. {!open ? ( "" ) : ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에도 필요하면 또 여기서 시킬 것 같아요. )} 더보기 ▼ 삼항 연산자를 이용하였다. !open ? 일때 ture 이면 " " ( 빈 문자열)을 반환, false 이면 ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에..
-
[React] useState (count하기, 비동기)프론트앤드/[React] 2023. 2. 22. 21:36
구현하고자 한것 useState를 선언합니다. 선언한 state는 숫자를 관리하는 state가 되어야 합니다. - 버튼을 누르면 숫자가 하나씩 줄어들도록 구현해주세요 (단, 숫자가 1일때는 더 이상 숫자가 내려가지 않게 구현해주세요) + 버튼을 누르면 숫자가 하나씩 늘어나도록 구현해주세요 reset 버튼을 누르면 숫자가 1로 되도록 구현해주세요 함수실행 방법 2가지 1. (); 만 오는경우 자체가 함수 즉시실행 2. () => {} 무언가 인자값을 넘겨줘야 할때 콜백함수를 이용하며, 함수를 나중에 호출해 준다 예시) 차이 : 인자값을 넘겨줘야 할때 () => {} 콜백함수를 이용 . state 가져올때 2가지 방법 1. setState(state - 1 ); -> 이전값이뭐든 상관없고 그냥 -1 해줘 2..