728x90 study/React5 react.js useEffect 처음 한 번만 렌더시키고 싶을 때 state변경되면 모든 코드들이 다시 실행된다.항상! 근데 api같은건 처음 렌더될 때 한번만 하면 충분한데 그럴땐 어떻게 할까? ==> useEffect를 사용! import {useState,useEffect} from "react"; . function App() { const [counter,setValue] = useState(0); const onClick = () => { setValue((prevs)=>prevs+1); } console.log("i run all the time"); // const iRunOnlyOnec = () =>{ // console.log('only once run'); // } // useEffect(iRunOnlyOnec,[]); //이 부분을 익명함수로 줄여.. 2022. 1. 5. react.js 리엑트 memo 아래와 같이 적었을 때 부모컴포넌트인 App 상태가 변경되면서 버튼 두개 다 리렌더링 됨! 그러나 confrim2는 바뀌는게 없는데 다시 리렌더링된다. const root = document.getElementById("root"); function Btn({text,changeValue}){ //changeValue 라는 프로프를 onClick이벤트 리스너로 사용한것. console.log(text+"was render"); return {text} } function App(){ const [value,setValue] = React.useState("save changes"); const changeValue2 = ()=>{ setValue("revert changes"); } ; return( ).. 2022. 1. 4. react.js props [2] 이부분 이벤트 리스너가 아니라 Btn으로 들어가는 prop다!! 지금 prop의 이름일뿐 Btn안으로 전달되고있는 것. 그니까 여기다가 넣는건 하나의 prop이고!! function 안에 넣는건 이벤트리스너다. 전혀 다른것이다.. 해도 스타일이 직접적으로 button에 달리지 않는다. 적용하려면 prop로 가져와서 적용시켜야 한다. 저기다 적은 onClick은 컴포넌트로 전달하는 무언가로 보면 될 듯!! 그래서 Btn컴포넌트에서 onClick가져오고 그 안에서 onClick으로 연결해줘야 이벤트리스너를 달아준것!!! 잘 이해한거 맞죠? 지나가다가 보신분들 틀린거 있으면 지적부탁드려요!! 2022. 1. 4. react.js props 리엑트 프로퍼티 속성에 대해 공부. 글자가 다른 같은 버튼을 컴포넌트 재사용으로 구현. 결과는 다음과 같음. 스타일 적을 땐 -로 적어주던 걸 뒷글자를 대문자로 쓰면서 카멜표기법처럼 쓰면된다. ex: border-radius ==> borderRadius 이렇게. 버튼 만들 때 원하는 값을 컴포넌트로 전달하고 싶으면 옆에 원하는 키워드 명으로 적으면 됨. 컴포넌트 인자는 props라는 이름으로 오브젝트를 전달받게 됨. 인자값에 {banana,apple} 이런식으로 바로꺼내 쓸 수도있다. 2022. 1. 4. React 프론트엔드 공부 퇴사하구..인강신청해서 듣는중이다.. 입문반으로 신청했어서 그른가..앞에 기본적인 부분은 웬만하면 다 알던거라1.5배속으로 다 들었다.. 듣고싶으면서도 빨리빨리 넘어가고 싶어서 빠르게 했보았는데 1.5까지 해도 무리가 없었다. 빠른만큼 엄청 딱 집중해서 들었다 필기도 빠르게 모르는거나 필요한거만 슈슈슉 적고.. 최근에 회의록 말고는 이렇게 많이 써본적이 없어서 그런가 오랜만에 뭔가 많이 끄적이니 손이..흠 학교 수업 듣고 복습할때나 열심히 썼던거 같은데....아무튼 열심히 적었다! 근데 작은 노트북에 강의 틀어놓고 반쪽은 에디터 열어놓고.. 하니까 답답해졌다.. 듀얼 모니터 맛을 몰랏었을 땐 불평도 없이 썼는데ㅠㅋㅋㅋㅋㅋ 강의 듣다가 너무 답답해서 급 모니터 하나 샀따.. 얼른와라..!!>ㅂ< 구매 해놓.. 2020. 7. 18. 이전 1 다음
