React16 합성 컴포넌트(Compound Component Pattern) 가끔 리액트로 컴포넌트를 만들다보면 이렇게 까지 나눠야해? 이런 느낌도 들기도 하고 얼마나 나눠야하지 라는 생각이 들기도 하다. 그래서 합성 컴포넌트에 대해서 알아보자 합성 컴포넌트란? 하나의 컴포넌트를 여러 가지 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 컴포넌트 패턴을 의미한다. (우선 아래와 같은 다이얼 로그가 있다. 디자인은 무시 바랍니다.) 코드는 이러하다. type Props = { isOpen: boolean; title: string; buttonLabel: string; }; export default function Dialog(data: Props) { const { isOpen, title, buttonLabel } = data; return ( {t.. 2023. 3. 12. Portals 언제 까지 부모 컨포넌트 아래에 jsx, tsx를 렌더링 할 것인가 이 지겨운 일상에서 탈출 시켜줄 portals를 소개해 드리겠습니다. Portals란? 리액트 16 버전 이상에서 도입된 기능으로 React 컴포넌트를 다른 DOM 노드에 렌더링할 수 있게 해주는 기능. 이것을 사용하면 현재 컴포넌트 트리 외부의 DOM 요소에 렌더링 해줄 수 있음 아래 코드펜에서 확인해 보자 See the Pen portals by SeungYn (@SeungYn) on CodePen. 사용법은 아래 코드처럼 ReactDOM.createPortal()인자에 첫번 째로는 jsx를 두번 째로는 렌더링할 부모 노드를 넣어주면 된다. function Portal(){ return ReactDOM.createPortal(포탈생성.. 2023. 3. 11. 액션 실행시 env 파일 적용시키기 aws s3에 깃허브 액션으로 배포를 하면 env 파일은 gitinore 파일에 명시되어있어서 업로드 되지 않는다. 이걸 깃허브 액션으로 env 파일을 만드는 법은 일단 첫 번째로 secrets and variables > Actions 로 들어가서 new Secret 를 누루고 사용할 키와 값을 넣어준다. 그 다음 액션 스크립트에서 다음 과 같이 작성한다. echo "REACT_APP_TEST2=${{secrets.REACT_APP_TEST2}}" >> .env 이 뜻은 echo 내용을 .env 파일 안에 작성한 다는 뜻 cat .env 는 .env를 출력한다는 뜻이다. 이제 push 를 해서 깃허브액션이 실행되게 해보면 다음 과 같이 나타난다 정상적으로 env 파일에 저장되었다는 뜻 2023. 3. 10. 연속된 커스텀 훅(훅인마) 어떻게 보면 당연한 건데 나 혼자 오해한 듯. 사건의 발단은 두 개의 커스텀 훅이 있다. 하나는 state값을 1초마다 증가해서 return 하는 훅 export default function useTest2() { const [state, setState] = useState(1); setTimeout(() => setState((f) => f + 1), 1000); return state; } 하나는 받은 값으로 다시 스테이트에 넣는 모습 export default function useTest1() { const data = useTest2(); const [test, setTest] = useState(data); console.log(data); console.log(test); return d.. 2023. 3. 9. 이전 1 2 3 4 다음
