Props2 React 조건부 렌더링을 활용한 로그인/회원가입 폼 리팩토링 과제진행중 , 로그인 페이지와 회원가입 페이지와 로그인 페이지에서 공통 입력폼을 사용하는데 헷갈리는 부분이 있었다. 로그인 페이지 폼 : 아이디 인풋, 비밀번호 인풋, 제출버튼회원가입 페이지 폼 : 아이디 인풋, 비밀번호 인풋, 닉네임 인풋, 제출버튼 회원가입 페이지에 인풋창이 하나 더 있는데 이걸 어떻게 공통컴포넌트로 사용할수 있을까...?! 내가 생각한 방법은 각 페이지에서 다른 props를 넘겨주어, 조건에 따라 각 페이지에 맞는 ui를 return 시켜주는것이었다.//로그인페이지에서 //회원가입페이지에서const AuthForm = ({ mode }) => { if (mode === "signin") { return ( .. 2025. 2. 21. useContext 왜쓰는데? 리액트에서 일반적으로 부모컴포넌트 > 자식컴포넌트로 데이터를 전달해줄때 props로 전달해주었다 그런데 만약 부모 > 자식 > 그자식 그 자식의 자식 ....*100 이라면??? 컴포넌트에서 prop 을 사용하지 않고 자식에게 전달만 하는 경우도 있다여기서 바로 prop drilling이 일어나게 된다.깊이가 너무 깊어지면 prop이 어떤 컴포넌트에서 전해져 왔는지 모를수 있다.컴포넌트에서 오류가 발생했을때 어떤컴포넌트에서 오류가 발생했는지 추적하는데 오래걸린다. 그러면 이런 문제점을 contextAPI로 해결해보자useContext hook 을 통해서 전역데이터를 관리 할수 있다.여기서 App.jsx전체를 묶을수도 있고, 컴포넌트들끼리도 묶을수 있겠다.context : 문맥, 맥락특정 영역 안에서 c.. 2025. 2. 6. 이전 1 다음
