react.js4 4. React.js effects state가 변화할 때 모든 component 들이 다시 실행되고 모든 code들도 다시 실행된다. 컴포넌트 내부의 코드중 일부는 처음 실행했을 때만 실행되고 state가 변화해도 다시 실행되지 않도록 하고 싶을때 effects를 사용한다. useEffect의 기본 사용법은 useEffect( , [ ])이고, 첫번째 아규먼트에는 실행되지 않게 하고싶은 함수의 이름을 넣고, 두번째 아규먼트 배열에는 특정 state(이 state가 변화할때만 첫번째 아규먼트에 들어간 함수를 실행시킨다.) 의 이름을 넣는다. 사용법 (예시) function App() { const [counter, setCounter] = useState(0); const onClick = () => { setCounter((current.. 2024. 2. 15. 3. React.js props 리액트 js props 리액트에서 부모컴포넌트에서 자식컴포넌트로 데이터를 보내야할때. ex. 버튼 스타일을 한개의 컴포넌트에 저장해놓고 안에있는 텍스트 값만 바꿀때 const root = document.getElementById("root"); function Btn(props) { return ( {props.text} ) } function ConfirmButton() { return ( Confirm ) } const MemorizedBtn = React.memo(Btn); function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => setValue (" Revert Change.. 2024. 2. 14. 2. setState, setState 예제 setState 프로그램 실행중에 데이터가 변화되어서 그것을 다시 렌더링 해야될떄 setState는 컴포넌트의 state 객체에 대한 업데이트를 실행한다.. state가 변경되면, 컴포넌트는 리렌더링된다. const root = document.getElementById("root"); function App() { let [counter, setCounter] = React.useState(0) const onClick = () => { setCounter(counter+1); } return ( Total clicks : {counter} Click me ); } ReactDOM.render(, root) React.useState 는 배열을 넘겨주는데 배열의 첫번째 요소는 우리가 담으려고하는 dat.. 2024. 2. 8. 1. html 태그, 속성, 내용, 이벤트를 리액트에서 만드는법 (jsx) jsx를 사용할때 변수,함수 이름은 대문자로 시작해야함 2024. 2. 8. 이전 1 다음