본문 바로가기
728x90

study53

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.
팝업창 오늘 하루 보지 않기 쿠키사용 $('.no-today-see').on('click',function(){ var iExpireDays = 1; var oTodayDate = new Date(); oTodayDate.setDate( oTodayDate.getDate() + iExpireDays ); document.cookie = 'supplyPop'+"="+ escape('done')+";path=/;expires="+oTodayDate.toUTCString()+";" }); 오늘 하루 보지 않기 클릭시 새로고침해도 팝업창이 하루동안 뜨지않게 하는 법. 하루가 아니라 이틀 삼일 등 좀더 늘리고 싶다면 iExpireDays 를 변경해서 사용. 개발자도구 어플리케이션>좌측 쿠키탭에서 새로운 쿠키가 생성 된 것을 확인할 수 있다. 2021. 12. 10.
centos selinux semanage port centos 에서 selinux사용 중인 상태!! 몇번 포트 열렸는지 확인 semanage port -l | grep http_port_t 8080번 포트를 허용. semanage port -a -p tcp -t http_port_t 8080 2021. 11. 30.