분류 전체보기

[React_study] array, object state 변경하는 법

* state 변경함수 동작원리 state변경함수를 쓸 때 기존state === 신규state 상태인지 먼저 검사해준다. 만약 같으면 state를 변경 해주지 않는다. JavaScript는 array/object 자료를 하나 만들면 자료는 Ram이라는 가상공간에 저장이 되고 변수는 그 자료가 어디 있는지 가리키는 화살표만 담고있다. (JavaScript reference data type) 따라서 완전 독립적인 array, object 복사본을 생성하려면 shallow copy, deep copy를 해주어야 한다. 방법으로는 spread operator 라고하는 문법이 있다. array혹은 object자료형 왼쪽에 붙일 수 있으며 괄호를 제거 해주세요. 라는 뜻을 가지고 있다. (array나 object..

[JavaScript][clean-code] Computed Property Name

* Computed Property Name (계산된 속성) 객체의 key값을 표현식(변수, 함수 등을 이용)을 통해 지정하는 것입니다. 속성명에 표현식을 사용하려면 대괄호("[ ]") 안에 표현식을 쓰면 됩니다. 표현식은 위에서와 같이 변수가 들어올 수도 있고, 함수가 들어올 수도 있습니다. * Computed Property Name 사용 예시(리액트) const handleChange = (e) => { setState({ [e.target.name] : e.target.value; }); }; return ( ); input안의 taget이 된 name의 값과 value를 가져온다 (계산된 값들) Computed value(input안의 name과 password)를 이용하면 동적으로 계산된 값이..

[JavaScript][clean-code] Shorthand Properties

* Shorthand Properties - 내가 사용하는 문법이 무엇이고 어떤값의 축약인지 파악하자. - css는 속성을 attribute라고도 부른다. javascript에서는 property라고 한다. 이것도 하나의 예시이다. * css에서의 Shorthand Properties예시 background-color background-image background-repeat background-position /* 아래와 같이 축약가능 */ background : #000 url(...) margin-top : 10px; margin-right : 5px; margin-bottom: 10px; margin-left : 5px; /* 아래와 같이 축약 가능 */ margin : 10px 5px 10p..

[JavaScript][clean-code] Continue & Break

* Continue & Break - Continue & Break는 특정 레이블 혹은 문의 흐름을 제어한다. continue : 흐름을 제어해서 반복을 첫번째로 돌린다. break : 바로 종료 그 다음으로 이동 * 하지만 forEach()에서 사용하면 error가 발생한다. const orders = ['first', 'second', 'third']; orders.forEach(function(order) { if (order === 'second') { continue break; } console.log(order); }); second이후에는 loop를 돌지않고 최적화를 해주고싶다. forEach를 사용하면 error이 발생한다. SyntaxError발생 이럴경우 try ..catch를 이용하..

[JavaScript][clean-code] map vs forEach

* map vs forEach의 차이 map : 새로운 배열 만들기 forEach : 요소가 loop될때마다 함수를 실행시켜준다. const prices = ['1000', '2000', '3000']; // forEach는 함수를 실행시켜준다. const newPricesForEach = prices.forEach((price) => return price + '원'); // map은 새로운 배열을 만들어 낸다. const newPricesMap = prices.map((price) => return price + '원'); // result newPricesForEach // undefined newPricesMap // ['1000원', '2000원', '3000원']; forEach의 반환값은 u..

[React_study] 리액트 state변경(useState) & 이벤트 핸들러

* 리액트 state변경하는 방법 (useState) state는 state변경함수를 써서 state를 변경해야합니다. state변경함수를 이용하지 않으면 html 재렌더링이 안된다. state를 만들때 배열안에 2개까지 작명을 할 수 있다. 두번째 값을 state의 값 변경을 도와주는 함수이다. 해당 함수를 이용해서 state변경이 가능하다. (참고) 관습적으로 set- 이라는 접두사를 붙여서 네이밍을 한다. setState(새로운 state) 형태로 사용한다. * 예시로 보는 state변경 방법 function App(){ const [up, setUp] = useState(0); return ( { setUp(up + 1) } }>{ up } ) } * 이전 값을 바탕으로 현재 값을 설정 하는 방법..