🌿Language/JavaScript 4

✏️ [React] setState

setState는 비동기입니다. 그래서 기존의 상태 값에 새로운 값을 추가하기 위해서는 다음과 같은 코드로 작성해야합니다. 틀린 예시 const [chat, setChat] = useState([]); socket.on('message', ({name, message}) => { setChat([...chat, {message, user}]) }) 위와 같이 작성할 경우, chat이 누적이 되지 않고 단순히 값만 변경되는 현상 발생 올바른 예시 const [chat, setChat] = useState([]); socket.on('message', ({name, message}) => { setChat(prev => [...prev, {name, message}]) })

Language/JavaScript 2021.10.19

✏️ [React] useEffect

처음으로 react를 사용하면서 삽질 중인데요, useEffect으로 인해서 문제가 생긴 경험을 공유하려고 합니다. useEffect란? useEffect는 기본적으로 몇 가지 조건에 의해 작동하게 됩니다. 1. 페이지가 처음 렌더링 되고 난 후, useEffect는 무조건 한 번 실행됩니다. 2. useEffect에 배열로 지정한 useState의 값이 변경되면 실행되게 됩니다. useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수입니다. useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 또는 여러 개의 함수들을 동작시킬 수 있습니다. useEffect를 사용하는 여러 가지 방법 1. use..

Language/JavaScript 2021.10.19

✏️ Number()와 parseInt() 차이

javascript에서 String을 Number type으로 바꾸는 방법에는 Number(), parseInt()가 있습니다. 하지만 두 가지 방법은 살짝 다릅니다. 다른 점에 대해 알아보러 가시죠~! parseInt()는 문자를 만나면 해당 문자 전까지만 Number type으로 변환하고, Number()는 전체 문자를 숫자로 변환합니다. parseInt()는 두 개의 인자를 받을 수 있습니다. 두 개의 인자를 받을 경우 두 번째 인자는 진수를 나타내게 됩니다. 즉, 두번째 인자를 밑으로 십진수로 변환한 Number type 값을 반환하게 됩니다. 말로 설명하면 어려운데, 예시를 보면 바로 이해가 됩니다요~! 이와 달리, Number()의 경우 인자를 하나만 받기 때문에, 두 개를 넣어도 parseI..

Language/JavaScript 2021.08.21