본문 바로가기
분류 전체보기
 (410)
[리액트(React)] 컴포넌트 동적 설정 특정 컴포넌트에서 하위 컴포넌트를 직접 정의하지 않고, 넘겨받은 값으로 동적으로 설정하고 싶을 때가 있다. 컴포넌트를 동적으로 설정하면 컴포넌트를 재사용할 수 있고, 유연하게 적용할 수 있다. 동적으로 컴포넌트의 값을 설정하기 위한 두 가지 방법이 있다. 1. 변수 사용하기 상위 컴포넌트에서 하위 컴포넌트에 props로 요소를 넘겨준다. return ( {tabContent} ); 하위 컴포넌트에서는 구조 분해 할당으로 요소를 넘겨받는다. 커스텀 컴포넌트는 대문자로 시작해야 하기 때문에 대문자로 시작하는 변수(상수)를 선언하여 wrapper 요소로 사용한다. export default function Tabs({ children, buttons, buttonsContainer }) { const Butt..
[리액트(React)] forwarded props(proxy props) 프로젝트의 볼륨이 커지다 보면, 같은 구조의 컴포넌트가 반복되는 경우가 생긴다. Examples handleSelect('components')}> Components {tabContent} 위와 같은 구조가 여러 컴포넌트에서 반복될 때, 아래와 같은 공통 컴포넌트를 추출할 수 있다. export default function Section({ title, children }) { return ( {title} {children} ); } 이제 새로 생성한 공통 컴포넌트를 사용한다. handleSelect('components')}> Components {tabContent} 그런데 이렇게 하면? 클래스 속성이 깨진다..!!! css를 id로 정의해뒀는데, 섹션 컴포넌트에 id 속성을 지정되지 않았기 때..
[SCSS] 웹스톰(Webstorm) SCSS 컴파일 SCSS 파일을 CSS 파일로 변환하기 위해서는 여러 가지 방법이 존재한다. sass-loader를 사용할 수도 있고, CLI에 명령어를 입력할 수도 있고, IDE에서 제공하는 기능을 사용할 수도 있다. 나는 웹스톰을 사랑하기 때문에.. 웹스톰의 File Watchers를 설정해서 컴파일했다. File Watcher를 사용하면 SCSS 파일이 변경될 때마다 자동으로 CSS 파일로 컴파일하도록 설정할 수 있어서 매우 편리하다. 1. sass를 설치한다. 나는 전역으로 설치했지만, 필요에 따라 프로젝트에 설치해도 된다. npm i -g sass 2. Settings > Tools > File Watchers에 들어가서 SCSS Template을 추가한다. 3. 컴파일 상세 설정을 해준다. 주로 설정해야 할 ..
[리액트(React)] Fragments // Fragments - 불필요한 노드를 추가하지 않고 여러 요소들을 묶을 때 사용한다. - 리액트는 단일 루트 컴포넌트를 반환해야 하는데, 이럴 때 를 사용하면 불필요한 DOM 노드가 추가된다. - Fragment를 사용하면 불필요한 DOM 노드 없이 묶을 수 있다. - 최근에는 fragment 대신 빈 태그()를 사용하기도 한다. function App() { return ( Core Concepts {CORE_CONCEPTS.map((conceptItem) => ( ))} Examples handleSelect('components')} > Components handleSelect('jsx')} > JSX handleSelect('props')} > Props handleSelect('state..
[리액트(React)] CSS 스타일링 및 동적 스타일링 // CSS 스타일링 - 리액트에서 클래스를 설정하기 위해 className prop을 사용한다. ~ className="클래스속성명" #examples menu button.active { background-color: #7925d3; color: #ebe7ef; } // CSS 동적 스타일링 - 조건부로 클래스 속성을 추가할 수 있다. ~ className={조건 ? '클래스속성명' : ''} - 상위 컴포넌트에서 boolean 값을 전달받아 클래스 속성을 추가할 수 있다. export default function App() { return ( handleSelect('components')} > Components handleSelect('jsx')} > JSX handleSelect('prop..
[자바스크립트(JavaScript)] 특정 범위에서 약수의 개수 구하기(에라토스테네스의 체) 해당 수의 약수인지 아닌지 1부터 그 수까지 반복문을 돌려서 구할 수도 있지만, 효율성이 많이 떨어진다. 코테에서는 시간 초과가 될 가능성도 크다. 특히 특정 범위의 모든 수의 약수를 각각 구해야 하는 경우는 매우 비효율적이다. 소수를 효율적으로 구할 때 에라토스테네스의 체라는 알고리즘을 사용하는데, 역시나 같은 알고리즘을 사용할 수 있다. 에라토스테네스의 체는, 1부터 n까지의 수들의 배수를 차례대로 채워나가면서 효율적으로 약수의 개수를 구할 수 있는 알고리즘이다. 만약 1부터 n까지의 범위에 있는 모든 수의 약수의 개수를 각각 구하려면, 크기가 n+1인 배열 생성 - index 와 수를 일치시키기 위해 n+1 크기로 배열을 생성한다. - 생성한 배열의 기본값을 모두 0으로 채운다. const numb..
[리액트(React)] React 18 버전 변경 및 추가 사항 // Automatic Batching - 여러 개의 state 업데이트를 각각 처리하는 것이 아니라 묶어서 한 번에 처리하는 것 - 재렌더링 횟수를 줄일 수 있다. setTimeout(() => { setCount(...); setName(...) }, 1000); 이전 버전 18 setCount(...) 처리 후 재렌더링 setName(...) 처리 후 재렌더링 setCount(...) 처리 후 setName(...) 처리까지 한 후 재렌더링 // Transition - 긴급한 업데이트와 긴급하지 않은 업데이트를 구분해서 긴급한 업데이트를 먼저 처리한다. ~ 긴급한 업데이트 : 사용자와 직접적인 인터랙션 有 ~ 긴급하지 않은 업데이트 : 사용자와 직접적인 인터랙션 無 - 긴급하지 않은 업데이트가 실행..
[자바스크립트(JavaScript)] 특정 범위에서 소수 구하기(에라토스테네스의 체) 해당 수가 소수인지 아닌지 반복문을 돌려서 구할 수도 있지만, 효율성이 많이 떨어진다.특히 특정 범위에서 소수를 모두 구해야 하는 경우는 해당 범위 * 범위에 속한 수의 크기만큼 반복문을 돌려야하기 때문에 매우 비효율적이다.function isPrime(number) { if(number === 1) return false; for(let i = 2; i - 좋지 않은 예시효율적으로 특정 범위에 있는 모든 소수를 구할 때 사용되는 알고리즘이 바로 에라토스테네스의 체이다.에라토스테네스의 체는, 소수의 배수들을 차례대로 지워나가면서 효율적으로 소수만 구할 수 있는 알고리즘이다.만약 1부터 n까지의 범위에 있는 수 중 소수를 모두 구하려면,크기가 n+1인 배열 생성 - index 와 수를 일치시키..

티스토리툴바