Study

[React_study] 리액트 환경에서 동적인 UI 만드는 법

* 리액트에서 동적인 UI 만드는 step - 동적인 UI는 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등등의 UI들을 의미한다. html, css를 이용해 미리 UI디자인을 만들어놓는다. UI의 현재 상태를 state를 이용해 저장해둔다. state에 따라서 UI가 어떻게 보일지 조건문을 이용해 작성한다. * 모달창을 이용한 동적인 UI 예시 코드 * html, css 디자인 Title Date Content .modal{ margin-top : 20px; padding : 20px; background : #eee; text-align : left; } * UI의 현재 상태를 state로 저장 let [modal, setModal] = useState(false); (stat..

[React_study] 많은 div들을 한 단어로 축약하려면 (Component)

* 복잡한 html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. 이를 Component라고 하며 Component를 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽃아넣을 수 있다. * Component 예시 코드 function App (){ return ( ) } function Modal(){ return ( Title Date Content ) } function을 이용해서 함수를 하나 만들어주고 작명한다. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 된다. 사용을 원하는곳에서 을 사용하면 아까 축약해두었던 HTML이 나타난다. 이렇게 축약한..

[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를 이용하..