728x90 반응형 Front Side/Library > React9 [React] onClick에 매개변수 넣기 뭐야 누르지도 않았는데 이벤트가 발동하네? 간단하게 onClick하면 '클릭했어!' console.log를 실행하는 함수가 있다. 하지만 위와 같이 (리)로딩되자마자 이벤트가 실행되었다! 이유가 무엇일까? 🤔 매개변수를 잘 전달하자 일반 함수에 매개변수를 넘겨주는 방식인 괄호 안에 매개변수를 넣을 경우 즉각 실행되기 때문에 그랬던 것이다. 그렇다면 어떻게 해야할까? onClick={() => {spanButtonClick(list.data._id);}} 우리는 익명함수로 감싸줘야 한다. 이렇게 할 경우 의도한 대로 버튼을 눌러야지만 이벤트가 실행된다. 2023. 2. 7. [React] 웹 컴포넌트 스타일링 관리 styled components로 시작하기 고민의 시작 React를 사용할수록 css 코드를 어떻게 하면 똑똑하게 관리할 수 있을지 고민하게 됐다. 기존에 사용하는 방식은 흡사 무지성인 것 같은 Import 방식이다. // App.js import "styles.css"; const App = () => { return( ... ); } Import 방식은 순수 JS로만 프론트를 짤 때 사용하던 방식이다. css 파일을 하나 만들어주고 그 파일을 가져와서 입혀준다. 이 방법으로 아직까지는 단점을 찾지 못했다. 하지만 React로 프론트를 짤 때 좀 더 똑똑한 혹은 편리한 css 관리가 있지 않을까? 프론트엔드 팀원과 고민 공유 프론트엔드 팀원분과 서로 개발 이야기를 하다가 저절로 고민을 공유하게 되었다. 실제 실무에서는 어떻게 관리하는지 궁금하기.. 2023. 1. 6. React에서 세션이 생성되지만 유지 되지 않는 Issue 해결 - withCredentials 옵션 현재 사이드 프로젝트 에서 Express와 React를 가지고 로그인 서비스를 만들고 있었다. https://bcoding-lab.tistory.com/m/350 Express에서 로그인 서비스 만드는 방법 with.Session 이미 7월 달에 세션으로 로그인 하는 서비스를 만들어본 경험이 있다. 근데 이번에 로그인 서비스를 구현할려고 하니 기억이 안나서 구글링이나 하고 있어 직접 포스팅을 해야겠다는 필요성을 bcoding-lab.tistory.com 하지만 이상한 현상이 포착되었다. 바로 postman에서 로그인을 하면 세션이 잘 유지가 되는데 React에서 로그인을 하면 세션이 생성은 되지만 유지가 되지 않는 Issue가 있었다. 너무나도 이상한 현상이라고 생각했다 😱 axios.post(`http.. 2022. 10. 17. [React] 회원가입과 로그인 서비스 구현 중 컴포넌트 재사용 (1) React에서 가장 좋은 장점은 컴포넌트 기반이기 때문에 재사용이 가능하다는 점입니다! 이번에 회원가입 서비스를 구현한 후 로그인 서비스 구현을 할려고 하니 이미 회원가입에서 만든 페이지를 재사용할 수 있겠다는 생각을 했습니다. 형식이 비슷해서 컴포넌트 재사용을 잘 활용해준다면 편리하게 개발할 수 있을 것 같습니다. 1. 부모 컴포넌트 만들기 - signup.js, signin.js 우선 url에 따라 사용될 로그인 컴포넌트와 회원가입 컴포넌트를 만들어줍니다. import React from 'react'; import AuthForm from './AuthForm'; const Signup = () => { return ( ); }; export default Signup; import React fr.. 2022. 10. 8. [React] useState() 바로 반영 안되는 현상 해결 회원가입 서비스를 만들려고 하는데 비밀번호와 비밀번호 확인가 일치할 때만 가입할 수 있도록 만들고 싶었습니다. 하지만 위와 같이 비밀번호를 동일하게 입력했음에도 불구하고 한 박자 느리게 useState가 반영되었습니다. const onChange = (e) => { setUser({ ...user, [e.target.name]: e.target.value, }) if(user.password === user.passwordCheck) { setIsPassword(true); } else{ setIsPassword(false); } } 코드를 보면 input에 상태값이 바뀔 때마다 onChange 함수가 실행되면서 만약password와 passwordCheck가 같다면 true로 바꿔주고 같지 않다면 fa.. 2022. 9. 21. [React] useEffect 두 번 호출?! with.StrictMode useEffect을 이용해서 백엔드로부터 받은 data를 확인하기 위해 console.log을 찍어보았습니다. 그런데..무려 두 번이나 콘솔에 찍혔습니다. 어째서 두 번이 호출된 것일까요? 🤔 root.render( ); 이유는 태그에 감싸져 있으면 개발 단계에서 오류를 잘 잡기 위해 두 번씩 렌더링 된다고 합니다! useEffect과 관련된 사항이 아니었군요. 그렇다면 StrictMode는 무엇일까요? 바로 React에서 제공하는 검사 도구입니다. 개발 모드일 때만 디버그를 하며 해당 태그로 감싸져 있는 컴포넌트의 자손까지 검사를 한다고 합니다. 공식문서 : https://ko.reactjs.org/docs/strict-mode.html Strict 모드 – React A JavaScript libra.. 2022. 8. 21. [React] 리액트 이해하고 사용하기 (3) useEffect useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json) setLoading(false) }) }, []) useState는 값이 변화할 때마다 매번 실행되지만 useEffect는 단 한 번만 실행된다. 즉, 우리가 언제 코드를 실행시킬지 결정할 수 있다는 것이다. useEffect으로 우리는 아래와 같이 언제 코드를 실행시킬지 결정할 수 있다. 1. 처음부터 실행시키기 2. 특정 조건일때 실행시키기 알고보니 useEffect를 이러한 특성을 이용해 서버와 통신하여 데이터를 주고 받을 수 있다. 특정 조건일 때 서버와 통.. 2022. 8. 16. [React] 리액트 이해하고 사용하기 (2) useState() 이용해서 리렌더링 하기 const root = document.getElementById("root"); let count = 0; function countUp() { count += 1; }; const Container = () => ( 클릭수 : {count} 클릭 ); ReactDOM.render(, root); JSX를 이용해서 간편하게 HTML를 render해줬다. 인제 우리가 원하는 것은 버튼을 클릭하면 클릭수가 0에서 클릭한 수만큼 바뀌는 것이다. 버튼을 클릭하면 countUp이라는 함수가 동작하고 함수로 인해 count는 1씩 증가할 것이다. 그렇지만 실제로는 UI에서는 아무런 일도 일어나지 않는다❗️ 왜그럴까? 바로 리렌더링이 되지 않기 때문이다. 코드가 동작하는 것을 보면 리렌더링 즉 새로고침이 되지 않는.. 2022. 7. 30. [React] 리액트 이해하고 사용하기 (1) JSX JSX를 모르고 리액트를 이해할 수는 없다. 리액트 공식문서에서도 맨 먼저 소개되는 개념이 JSX일 정도로 중요하다. 공식문서를 보는 것도 추천하기 때문에 아래 링크를 참고하시길. https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 클릭수 : 0 클릭! 순수 JS에서는 body에 HTML을 만들어준 다음 에서 기능이 동작하게 해줬다. 하지만 기능이 동작하게 하기 위해서는 document.getElementById라든지 document.querySelector라든지 HTML을 가지고 와야했다. 이 비효율적인 방식을 바꿔주는 것이 .. 2022. 7. 30. 이전 1 다음 728x90 반응형
