JavaScript (28) 썸네일형 리스트형 [React JS] Cleanup function 이번엔 cleanup 기능에 대해서 알아보자. 우선 다음과 같은 코드를 준비한다. import { useState, useEffect } from "react"; const Hello = () => { useEffect(() => { console.log("I'm here!"); }, []); return Hello!; }; function App() { const [showing, setShowing] = useState(false); const onClick = () => { setShowing((prev) => !prev); }; return ( {showing ? : null} {showing ? "Hide" : "Show"} ); } export default App; 이를 화면으로 출력한다면 .. [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.. [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 다른 기능들과 마찬가지로 를 본문에 삽입 후 작성하였다. 거리, 무게, 시간 단위 변환이다. [React JS] state를 활용 해보기 지난번 배운 state기능과 input을 활용하여 분 -> 시간 변환을 만들어보았다. 변환 설정 기준을 min으로 하여 useState 변수 설정을하고, onChange함수를 이용하여 input입력 숫자가 바뀔 때 마다 자동적으로 아래 시간input의 값이 바뀌게 설정하였다. 이제 flip의 기능을 넣어서 버튼을 누르면 분 혹은 시간의 input을 disabled 하게 만든다. const [flipped, setFlipped] = React.useState(false); const onFlip = () => { //setFlipped(!flipped); setFlipped((current) => !current); } Flip 클릭 시 기능을 수행하는 onClick함수를 넣고 useState를 만들어줬다.. [React JS] setState 배열 관련해서 const x = [1,2,3] 이런 배열이 있다면 기존에는 const a = x[0] ===> 1 const b = x[1] ===> 2 ... 으로 했지만 const [a, b, c] = x; 으로도 가능하다. (코드를 짧게 만들 수 있음) React.useState(우리가 담으려는 data 값, data 값을 바꿀때 사용할 modifier) modifier(원하는 변경값, 함수) 를 넣으면 업데이트 및 자동적으로 reRender이 된다. const [a,setA] = React.useState(0); const onClick = () => { setA(a + 1); } 만약 버튼이 있고 버튼에 onclick이 적용되어 있다면 클릭 시 자동적으로 숫자가 올라가게 된다. Total cli.. 이전 1 2 3 4 다음
