Study

[React_study] Context API

* SPA의 단점 컴포넌트간 state 공유가 어렵다. 부모 컴포넌트 => 자식 컴포넌트 props전송은 가능 props가 10개 ~ 20개 중첩이 되어 있으면 너무 헷갈리고 파악하기 어렵다. (Prop Drilling) * 해결방법 Redux와 같은 외부 라이브러리 사용 Context API를 사용 (오늘 알아볼 내용) * Context API를 이용해 props없이 state를 공유하는 방법 - setting createContext() 함수를 가져와서 context를 만들어준다. (context를 쉽게 비유해서 설명하자면 state 보관함이다) Context로 원하는 곳을 감싸고 공유를 원하는 state를 value안에 적으면 된다. Context로 감싼 모든 컴포넌트와 자식컴포넌트는 state를 ..

[JavaScript][clean-code] default Value / default parameter

* Default Value / Default parameter - 기본값 설정 * 기본값 예시 코드 function createCarousel(options) { options = options || {}; const margin = options.margin || 0; const center = options.center || false; const navElement = options.navElement || 'div'; // ...some code return { margin, center, navElement, }; } createCarousel(); 기본값 설정이 되어 있어서 인자가 들어오지 않을경우 기본값으로 할당이 된다. * 기본값 다른 예시 function createCarousel({ ..

[JavaScript][clean-code] 복잡한 인자 관리하기

* 복잡한 인자 관리하기 - 인자의 갯수별로 함수의 사용도가 달라지기보단 인자의 갯수에 따른 맥락을 유추할 수 있는 방식이 더 중요하다. 무조건 인자가 많은게 나쁜건 아니다. 맥락과 흐름을 파악할 수 있는 인자가 더 중요하다. * 맥락과 흐름을 파악할 수 있는 인자 예시코드 function toggleDisplay(isToggle) { // ...some code } // 인자의 네이밍을 보고 bool형식의 인자가 들어갈 것이 유추된다. function sum(sum1, sum2) { // ...some code } sum(1, 2); // 값이 2개 이므로 2개의 값을 더하는구나를 유추 할 수 있다. function getRandomNumber(min, max) { // ...some code } * ..

[JavaScript][clean-code] argument & parameter

* argument & parameter - 자바스크립트 함수에서 넘기는 인자 혹은 매개변수 * JavaScript argument vs parameter의 다른점은 무엇일까? MDN에서는 아래의 예시와 같이 구분하고 있다. function example(parameter) { console.log(parameter); } const argument = 'foo'; example(argument); 함수의 parameters는 이름이 있고 함수의 정의 부분에 있다. 함수의 arguments는 함수에 들어가는 real value이다. * Parameter (Formal Parameter) 예시 형식을 갖춘 매개 변수 function axios(url) { // some code } * Argument (A..

[React_study] 컴포넌트 전환 애니메이션 지정 (transition & automatic batch)

* 애니메이션 개발 단계 애니메이션 동작 전 스타일을 담아둘 className생성 애니메이션 동작 후 스타일을 담아둘 className생성 transition 속성 추가 원할 때 2번 탈부착을 해준다. * 애니메이션 예시 코드 (fade in 애니메이션 예시 코드) 애니메이션 동작 전 className 생성 애니메이션 동작 후 className 생성 transition 추가 원할 때 fade-end 탈부착 .fade-start { opacity : 0; } .fade-end { opacity : 1; transition : opacity 0.5s; } function TabContent({tab}){ return ( { [content0, conten1, content2][tab] } ) } useEff..

[React_study] if를 사용하지 않고 props를 사용하기

* if를 사용한 예시 function Detail(){ let [tab, setTab] = useState(0); return ( ) } function TabContent(props){ if (props.tab === 0){ return content0 } if (props.tab === 1){ return content1 } if (props.tab === 2){ return content2 } } { setTab(0) }} eventKey="link0">Button0 { setTab(1) }} eventKey="link1">Button1 { setTab(2) }} eventKey="link2">Button2 * if문을 사용하지 않고 변경하기 방법1 function TabContent(props)..