SUIN

Toast ui 포스트를 참고하던 중 리액트 지연초기화라는 것을 알게 되었다. 원문 : https://www.benmvp.com/blog/four-characters-optimize-react-component/ Four characters can optimize your React component | Ben Ilegbodu How making use of useState lazy initialization can speed up your React function component www.benmvp.com // 예제 1 const Counter = () => { const [count, setCount] = useState( Number.parseInt(window.localStorage.getIt..

NavLink v6.6.1 Type declarationdeclare function NavLink( props: NavLinkProps ): React.ReactElement; interface NavLinkProps extends Omit { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean reactrouter.com 프로젝트의 sideNav를 구현하는 중 router-dom NavLink를 활용하여 페이지 이동과 스타일링을 구현해 보았다. 조건 - 5개의 Link 중 3개->페이지 이동 / 2개- 전역모달 구현..

Outlet v6.6.0 Type declarationinterface OutletProps { context?: unknown; } declare function Outlet( props: OutletProps ): React.ReactElement | null; An should be used in parent route elements to render their child route elements. This allows nested UI to show up when ch reactrouter.com 하위 경로 요소를 렌더링하려면 상위 경로 요소에서 을 사용해야 합니다. 이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있습니다. 상위 경로가 정확히 일치하면 하위 경로를 렌더링하거나 ..

리액트의 조건부 랜더링은 JS의 조건 처리와 동일하게 동작한다. 조건부 랜더링은 엘리먼트를 변수로 만들 수 있다. 1. if //로그인 function LoginButton(props) { return ( Login ); } //로그아웃 function LogoutButton(props) { return ( Logout ); } render() { const isLoggedIn = this.state.isLoggedIn; let button; //조건문 if (isLoggedIn) { button = ; } else { button = ; } return ( {button} ); } 2. && && 뒤의 엘리먼트는 조건이 true일때 출력 false라면 React는 무시하고 건너뛴다. function M..

스켈레톤이란 웹페이지에서 로드 시간이 짧아 보이게 하는 몇 가지 방법 중 하나가 스켈레톤이다 데이터가 로드되기 전에 컨텐츠의 자리비움을 표시하여 사용자가 기다리는 시간을 덜 지루하게 하는 ui이다 장점 - 실제 테스트 결과 블랭크 페이지 < 스피너 < 스켈레톤 순서대로 더 빠르다고 느끼게 된다. 단점 - 스켈레톤을 화면마다 표시해야하기때문에 시간이나 비용이 많이 든다. 실생활에서 볼수있는 스켈레톤 예시 스켈레톤 규칙 스켈레톤은 콘텐츠의 로드를 방해하면 안된다! 실제 콘텐츠는 데이터를 가용할 수 있는 시점이 되면 즉시 스켈레톤을 대체해야함 디자인 할 때 애니메이션을 사용하는 것이 좋다 애니메이션은 wave, pulse 중 wave 를 사용하는 것이 로딩 시간을 더 짧게 느끼게끔 한다. 느리고 안정적인 애니..

html의 여러 태그들을 react로 어떻게 표현할 수 있을까 h1 h3 h5 react에서 여러 가지 children 속성을 넣어줄 수 있었다 그럼 children에 직접 객체를 주입해보면 어떨까 root로 태그를 넣어준 것과 동일하게 보이지만 코드 구조가 다르다 React에서는 하나의 태그에 children으로 여러 element를 만들어주기 때문에 하나의 요소가 감싸질 수밖에 없다 그래서 React.Fragment를 이용해서 부모로써 감싸주는 역할만 해주고 실제 html을 작성할 때는 그려지지 않는다. React.Fragment는 빈태그 로 도 표현할 수 있다. creactElement를 JSX로 변경해보자 const elementReact = ( ); //-----------------------..

jsx 없이 element를 직접 만들어 보았다 [React] React DOM 다루기 (JSX 없이 element 그려보기) VanillaJS로 element 생성 React로 element 생성 두 element를 console로 확인해보자 React 새로운 객체를 만들어냈고 그 안에 props에 children 이 들어가 있는 걸 확인할 수 있다 * React에서는 props로 넘기.. suinchoi.tistory.com JSX 문법을 이용해서 간단하게 코드를 변경해보자 JSX란? const element = Hello, world!; - 문자도 HTML도 아닌 JavaScript 확장 문법이다 * 전체적인 코드는 js처럼 보이지만 HTML 태그도 보이는 것을 확인할 수 있다. * JSX를 사용하..

VanillaJS로 element 생성 React로 element 생성 두 element를 console로 확인해보자 React 새로운 객체를 만들어냈고 그 안에 props에 children 이 들어가 있는 걸 확인할 수 있다 * React에서는 props로 넘기지 않고 3번째 인자로 element를 생성할 수 있다 const elementReact = React.createElement("h1", null, "ReactJS"); 콘솔을 확인해보면 객체로 넣어주지 않아도 동일하게 props에 children으로 보이는 걸 확인할 수 있다. 그럼 객체와 인자를 모두 적용하면 어떻게 될까? props에 children을 넣어도 3번째 인자값이 있으면 3번째 인자를 먼저 그린다 children은 여러개를 넣을..