React
-
Styled-Components / React 리액트 스타일 컴포넌트 공부하기React/Styled-Components 2023. 2. 20. 16:47
📌 설치하기 vscode 터미널에 npm i styled-components js file에 임포트해준다 : import styled from "styled-components" 📌 사용하기 : Html + CSS vs Styled-Components 비교 import styled from "styled-components"; const Father = styled.div` display: flex; `; const BoxOne = styled.div` background-color: red; width: 100px; height: 100px; `; const BoxTwo = styled.div` background-color: blue; width: 100px; height: 100px; `; cons..
-
타입스크립트로 리액트 시작하기 + 기본 문법React/React+TypeScript 2023. 2. 18. 17:31
📌 리액트로 타입스크립트 시작하기 npx create-react-app 내 앱 이름 --template typescript npm i --save-dev @types/styled-components npm i styled-components 📌 Typescript 사용법 1. node 설치 후 터미널에 npm install -g typescript 2. tsconfig.json 파일을 만들고 { "compilerOptions" : { "target": "es6", "module": "commonjs", "lib": [ "es6" ] } } 를 붙여넣는다 3. ts 파일을 js 파일로 변환하기 위해 tsc -w 라는 명령어를 터미널에 쳐놓는다. // 1. 변수의 타입을 설정할 수 있다. let name: ..
-
useEffect 에서 return 문을 왜 쓰이는걸까?React/React 2023. 2. 14. 17:40
✔️ useEffect 는 html 이 모두 렌더링 된 후 실행된다. ✔️ useEffect는 기본적으로 매 렌더링마다 실행되며. 만약에 dependency가 없다면 컴포넌트가 마운트되고, 업데이트될때마다 useEffect()가 실행된다. 따라서 두번째 인자로 [ ] 를 적어주면 해당 부분이 랜더링 될때만 useEffect 가 실행된다. useEffect(() => { document.addEventListener("mouseleave", handle); return ()=> document.removeEventListener("mouseleave", handle) }, []); 📌 그렇다면 useEffect 속 return 문은 무엇일까? ❗️useEffect에서 return 의 의미는 useEffec..
-
React 조건에 따라 component 렌더링 시 가독성 좋은 두 가지 방법React/React 2023. 2. 7. 23:54
1. && 연산자로 if 문 대신하기 왼쪽 조건식이 true이면 오른쪽 jsx가 렌더링 됩니다. false이면 오른쪽 jsx가 렌더링되지 않습니다. function Component() { const [mode , setMode] = useState("list") return ( { list === list && } { Edit === Edit && } ) } 2. {{}}[ ] 문법 이용하기 [mode] 의 값에 따라 해당 jsx가 렌더링됩니다. function Component() { const [mode , setMode] = useState("list") return ( { { list : , edit : , }[mode] } ) }
-
onClick으로 전달되는 함수형태에 따른 차이React/React 2023. 2. 1. 02:34
📌 첫번째 방식이 show 라는 함수를 재사용할 수 있기 때문에 좋은 방식이다. 📌 두번째 방식은 button 이 렌더링 되면서 show라는 함수가 실행(show())되어버린다. 📌 세번째 방식은 ()=>{} 익명함수에 넣어쓰는 방식인데 {} 중괄호 안에 코드가 한두줄일때 가볍게 넣는다. 그러나 jsx안에 넣는 방식은 코드의 재사용이 힘들어지기 때문에 그리 추천하지 않는다. 🔥 결론 첫번째 방식으로 하자! const Buttons = () => { let num = 0 const show = () => { console.log(`show ${num}`); ++num }; return // 1. 첫번째 방식 show //클릭시 num 이 1씩 증가하면서 출력된다 // show 0 // show 1 // s..