이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다. 1. 클래스형 컴포넌트가 함수형 컴포넌트로 대체된 이유class ProfilePage extends React.Component { showMessage = () => { alert(`${this.props.user} 를 팔로우 했습니다`); } handleClick = () => { // const {user} = this.props; 이렇게 미리 할당해둬서 해결은 가능 // setTimeout(() => this.showMessage(user), 3000); setTimeout(this.showMessage, 5000); // this.showMessage 대신 user 넣으면 해결 가능 } render() { return Fol..
오늘 GDSC에서 주최한 'kprintf'라는 행사를 다녀왔다. 디스코드에서 kprintf라는 행사가 열린다는 것을 확인하고 무슨 주제에 대한 강의가 열리는지 살펴봤다. 다양한 주제들이 있었는데 그 중에 React에 대한, 정확히는 React 버전이 19로 업데이트되면서 어떻게 바뀌는지 알려주는 강의가 있길래 바로 신청했다. React를 사용해본 적은 꽤 있지만 버전이 몇인지, 또 최신 기능은 무엇인지에 대한 관심은 갖지 않았었다. 이번 세션을 통해 React에 대하여 더 깊은 이해도를 가질 수 있기를 기대했다. 이번 학기에(사실 저번학기도) 신공학관에서 수업을 듣지 않기에 정말 오랜만에 신공학관을 방문한 것 같다. 입장권 QR코드를 체크하고 학번과 이름을 작성했다. 그리고 위 사진과 같이 경품을 받았다..
1. 인트로 수정 저번에도 언급했듯이 카카오로 소셜로그인을 하는 대신 이메일로 로그인과 구글로 로그인을 구현하기로 해서 인트로 화면을 변경해야 했다. 카카오 로그인 버튼을 빼고 이메일과 비밀번호 입력란, 회원가입(이메일) 버튼, 구글로 로그인 버튼을 새로 만들었다. 이메일로 회원가입도 진행해야 되니 회원가입 화면도 새로 구현했다. 비밀번호 확인은 비밀번호 코드를 복붙해서 만들었는데 비밀번호에 input을 입력하면 비밀번호 확인에서도 똑같은 input이 입력되는 오류가 생겼다. 아무래도 수정이 필요할 것 같다. 2. Quill 에디터 도입 전에는 글 작성을 그냥 textarea로 구현했었는데, 생각해보니 게시물에는 사진도 첨부되는 것이 맞는 것 같아 어떻게 하면 좋을까 생각하다가 에디터 라이브러리를 도입하..
이번에 프로젝트를 진행하면서 useState()를 활용한 상태관리를 하고 있는데, 상태관리에 대한 확실한 이해 없이 무작정 작업을 하다보니 코드가 내가 이해하기도 어려울 정도로 복잡해져 있었다. 그래서 상태관리에 대한 공부를 하고 다시 코드를 수정했다. 이번에 알게 된 내용을 한 번 정리해 보려 한다. 1. 상태 관리는 부모에서 이루어지고, 자식에게 props로 전달한다. 부모 컴포넌트 A와 자식 컴포넌트 B,C가 있다고 가정하자. 그렇다면 상태를 관리하는 로직은 부모 컴포넌트 A에 작성하고 이를 자식한테 props로 전달하면 된다. 만약 자식 컴포넌트에서 버튼을 클릭하면 상태가 업데이트되는 것을 부모한테 전달하고 싶다고 가정하자. (여기서 부모는 SearchResult.tsx이고, 자식은 BtmShee..
useEffect()는 코드의 실행 시점을 관리할 수 있는 함수이다. useEffect()는 두 개의 argument를 가지고 있는데, 첫 번째 argument는 우리가 실행하고 싶은 코드가, 두 번째 argument에는 [] 배열(dependency)이 있다. 두 번째 argument에 무엇이 들어가느냐에 따라 실행 결과가 달라지는데, 1. 빈 배열을 넣는 경우 -> 최초 1회 랜더링 될 때만 실행한다. 2. [a] -> a가 변경될 경우만 랜더링한다. 3. [a, b] -> a나 b중 하나가 값이 변경 될 때 랜더링한다. useEffect()를 사용하여 불필요한 렌더링과 작업을 방지할 수 있다. 예시 코드 const onChange = (event) => setKeyword(event.target.v..
React에서 Props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용되는 매커니즘이다. 요소를 만들 때마다 스타일들을 작성해주는 것은 너무 시간이 오래 걸린다. 그 대신 스타일들을 모두 갖는 단 한가지의 컴포넌트를 만들어서 사용할 수 있다. Props 코드 예시 내가 만들고 사용하는 모든 컴포넌트들은 function Btn() -> 괄호로 argument(인자)를 받는데, 이 때 argument의 이름은 마음대로 지어줄 수 있다. 리액트가 실제로 하는 작업은 함수(Btn())를 호출해서 우리가 넣어둔 모든 것들을 첫 번째 인자로 넣어주는 것이다. Btn 컴포넌트의 prop들에게 접근하려면 prop.text 등으로 적어준다. React.memo() props에 function도 보낼 수..
어떻게 하면 React.js에서 값이 바뀔 데이터를 담아줄 수 있을까? useState()를 활용하면 React.JS에서 데이터를 저장시켜 자동으로 리렌더링을 일으킬 수 있다. useState() 코드 예시 const data = React.useState();를 console.log 시키면 [undefined, f ] -> undefined와 함수가 적힌 배열이 나타난다. undefined는 data이고 f는 data를 바꿀 때 사용하는 함수이다. React.useState() 함수는 초기값을 설정할 수 있다. 즉, undefined -> 초기값 , f -> 그 값을 바꾸는 함수이다. React.useState() 배열에서 보통 데이터에는 counter처럼 원하는대로 붙이고 f는 set 뒤에 데이터 이..
createElement React에서는 createElement 함수를 통해 React 요소를 생성할 수 있다. 하지만 실제로 createElement를 쓰는 경우는 많지 않기에, 이해만 하고 넘어가자. createElement를 쓸 때 첫 번째 argument는 root에 들어갈 HTML 태그이며, 두 번째 argument는 props가 포함된 object, 세 번째 argument는 content이다. ※ chatGPT의 createElement에 대한 설명도 첨부한다. React.createElement(type, [props], [...children]) type: React 요소의 타입을 나타냅니다. 예를 들어, HTML 요소라면 문자열로 "div", "span" 등을 사용하며, 사용자 정의 ..
