리액트
-
부모에서 자식까지 일일이 Prop전달하기 싫을 때?FrontEnd/React 2022. 10. 2. 13:50
가끔 React로 코딩하다보면 부모의 state나 함수를 자식의 자식의 자식...에게 전달해야 할 때가 있다. 그러면 코드도 복잡해지고 가독성이 떨어지는데 이를 해결할 수 있는게 바로 Context이다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 리액트 공식 홈페이지에 Context란에 가보면 이렇게 설명해준다. 우리는 언제 Context를 쓸 지(일일이 전달하기 번거로울 떄)를 정했으니 어떻게 쓰는지 알아보자. Context 생성하고 사용해보기 Context를 생성하려면 React.createContext API를 사용하면 끝이다. const MyContext = React.createContext(defaultValue) ..
-
회원가입 팝업 완성Project/실시간 채팅 앱 2022. 9. 20. 13:05
회원가입 팝업을 만들었다. 우선 팝업 내에서 상황에 따른 컴포넌트를 랜더할 수 있도록 로그인 컴포넌트와 회원가입 컴포넌트를 나누었다. 로딩방식은 Popup Content 컴포넌트에 state를 하나 부여해서 login버튼을 누르면 login에 대한 화면이 나오고, 회원가입을 누르면 login컴포넌트와 연결된 state가 false로 바뀌면서 동시에 회원가입 컴포넌트가 랜더된다. 여기서 생긴 욕심이 하나 있다. 로그인 팝업은 그냥 생겨도 아무 상관이 없는데 여기서 회원가입 버튼을 누르면 팝업 전체가 작아졌다가 다시 커지면서 회원가입창이 로딩되는 인터렉션을 구현하고 싶다. 회원가입이나 로그인이나 전체 높이가 크게 차이나지 않아서 큰 이펙트로 다가오진 않겠지만 이런 소소한 인터렉션이 내 웹에 재미를 주는 요소..
-
로그인 팝업 완성!Project/실시간 채팅 앱 2022. 9. 12. 23:58
로그인 팝업을 완성했다. UI는 pinterest에서 이것저것 둘러보고 괜찮은 것들을 조합해서 만들었다. 만들면서 팝업 상단에 보이는 아이콘과 버튼에 들어가는 폰트 사이즈를 반응형으로 조절하고 싶었는데 그게 좀 어려웠다. 그래서 calc속성으로 그나마 제일 알맞게 설정해주었다. UI는 나름 만족스럽게 나온 것 같다. id/pw찾기는 로그인 실패시 띄우려고 했는데 마음이 변하면 회원가입이랑 로그인 버튼 사이에 넣으면 될 것 같다. 회원가입 팝업은 현재 내용이 사라지고 박스가 작아졌다가 회원가입이 가능한 form을 담은 창이 열리는 인터렉션을 구현하고 싶은데 열심히 고민해봐야겠다. 오늘도 빡코딩 끝!