전체 글 (64) 썸네일형 리스트형 [React JS] useEffect useEffect는 매번 호출되지 않고 실행 시 한번만 호출된다. 다만 특정 코드만 변화시 재호출하게 설정할 수 있다. 글로는 어려우니 코드와 함께보기로 한다. import PropTypes from "prop-types"; import { useState, useEffect } from "react"; import styles from "./Button.module.css"; const Button = ({ text }) => { const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(""); const onChange = (event) => { setKeyword(event.target.value); }; co.. [VSC] 저장 시 자동 줄 정렬 Prettier 설정 Prettier을 다운받았으면 [React JS] Prop Types Prop을 설정해 주다가 위와 같은 상황이 벌어진다면, 문법적으로는 맞기 때문에 애러는 발생하지 않지만, 커스텀 컴포넌트 사용자의 관점에서는 오류라고 볼 수 있다. 이와 같은 상황을 방지하기 위해서 prop에 type을 지정할 수 있는데, https://unpkg.com/prop-types@15.7.2/prop-types.js 을 script로 혹시 적용이 안된다면 기존에 사용하던 https://unpkg.com/prop-types@15.7.2/prop-types.js 를 https://unpkg.com/react@17.0.2/umd/react.development.js 로 변경하면 적용된다. Btn.propTypes = { text: PropTypes.string, fontSize: PropTypes... [React JS] Memo React JS에서 HTML요소에 들어가는 onClick과 같은 이벤트 리스너가 커스텀 컴포넌트에서는 이벤트 리스너가 아닌 onClick라는 이름을 가진 Prop을 전달한 것 뿐이다. const Btn = ({text}) => { return( {text} )}; const App = () => { const [value, setValue] = React.useState("Save changes"); const changeValue = () => setValue("Revert changes"); return ( ); }; 마찬가지로 커스텀 컴포넌트에는 style 같은 서식도 적용되지 않고 하나의 prop으로 받아들인다. 따라서 커스텀 컴포넌트에 이벤트를 넣고 싶다면 해당 자식 컴포넌트에 prop을 보내주.. [React JS] Props 부모 컴포넌트로부터 자식 컴포넌트(=function)에게 데이터를 전송하는 방식 => Props const root = document.getElementById("root"); const Btn = (props) => { return( {props.tomato} )}; const App = () => { return ( ); }; ReactDOM.render(, root); 부모 컨포넌트의 props 를 tomato로 지정한 후 자식 컨포넌트에 props.tomato로 설정하면 이와 같은 모습이 된다. 추가적으로 shortcut을 이용하면 자식 컴포넌트에 props로 지정하지 않고 {tomato}로도 가능하다. const root = document.getElementById("root"); const.. [React JS] state 활용하기2 기존에 만들었던 momentum app에 react js를 추가해 보았다. https://ge5rg2.github.io/momentum-2021/ Momentum App What are the things you need to focus on today? ge5rg2.github.io 다른 기능들과 마찬가지로 를 본문에 삽입 후 작성하였다. 거리, 무게, 시간 단위 변환이다. [Git&Github] branches vsc 콘솔 이용 중 이전 커밋으로 돌아가는 것은 $ git checkout `해당 commit의 별명` 이다. 새로운 브런치 만드는 콘솔은 $ git checkout -b `branch명`이다. 이전 커밋으로 돌아가는 동시에 이전 커밋을 base로하는 새로운 branch를 만들 수 있다. *한꺼번에 진행 $ git checkout `commit별명` -b`branch명`이다. main branch으로 돌아가기 $ git checkout main branch 목록 보기 $ git branch branch를 콘솔로 삭제하는 방법은 $ git branch -d `branch 명` 마지막 커밋 수정하기 $ git commit --amend -m `message` $ git commit --amend --no-.. [Git&Github] CLI log, commit, push vsc을 이용해서 생성 수정 삭제를 하면 file 옆에 M 표시가 있는데, 이는 해당 파일 내용이 변경(수정)되었다는 것을 의미한다. 새로운 file을 만들면 해당 파일 옆에 U(untracked) 표시가 있는데, 이는 git이 아직 해당 파일을 추적하지 않고 있다는 뜻 즉 git에 등록되지 않았다는 뜻이다. 이후 체크버튼을 클릭하면 자동으로 github으로 commit한다. commit 히스토리는 터미널로 가서 git log라고 입력하면 commit 히스토리가 나온다. push는 터미널에 git push origin main을 입력하면 github으로 push된다. 콘솔로 git을 추가하려면 git add . 을 입력한다. ( .)은 폴더의 뜻이다. 그 다음 git commit -m(다른 항목이 궁금하.. 이전 1 2 3 4 5 6 7 8 다음
