Rainyjune Blog

https://ko.reactjs.org/docs/components-and-props.html Components와 Props – React A JavaScript library for building user interfaces ko.reactjs.org Props? Props는 부모 컴포넌트에서 자식 컴포넌트로 state를 전달할 수 있는 문법이다. JavaScript 함수의 parameter 역할과 같다고 볼 수 있다. // 컴포넌트에 prop를 전달하는 방법 // 부모 컴포넌트로부터 전달받은 props를 사용하는 방법 Function ComponentName(props) { return( ... { props.propName } ); } props는 일반적인 state일 수도 있고, 함수일 수도..

JavaScript에서의 map() Array에서 map method는 array 요소만큼 반복하여 map method 영역에 기술된 callback 함수를 반복한다. map method 예제 let arrTest = [1, 2, 3]; let newValue = 4; // map은 arrTest 내용을 반복탐색하며 callback 함수를 호출한다. // parameter는 2개를 첫 번째 parameter는 arrTest의 값, 두 번째 parameter는 현재 반복문 실행 Index를 나타낸다. arrTest.map( (val, arrIdx) => { console.log(`value:${val}, Index:${arrIdx}`); // value:1, idx:0 // value:2, idx:1 //..

동적 UI를 사용하기 위한 3-steps HTML/CSS를 사용하여 미리 디자인을 만든다 UI의 현재 상태를 state로 저장한다. 해당 state에 따라 UI가 어떻게 보일지 작성한다. HTML에서 조건문 사용하기 삼항연산자를 사용한다. { condition == true ? true_result : false_result } 글 제목을 클릭하면 특정 컴포넌트의 state가 변경되도록 구현하는 예제 function Component() { return( 세부 제목 상세 내용 ); } function App() { let [comp, setComp] = useState('closed'); function switchComp() { if (modal == 'closed') setModal('opened')..

페이지 구성 (new.mustache) // 제목 Textbox 제목 // 내용 Textarea 내용 // Submit 버튼 Submit 위 form의 action은 submit 버튼을 누르면 /articles/create 를 post로 호출하도록 정의되었다. 제목 textbox의 내용은 title, 내용 textarea의 내용은 content로 전달된다. Controller의 Post 동작 수행 (ArticleController) Controller class는 @Controller annotation을 붙여준다. Controller 내용 정의는 아래와 같다. @Controller public class ArticleController { @PostMapping("/articles/create") //..

View Layout이란 웹 페이지의 화면 구성 대표적인 Layout 구성은 Header-Footer Layout Layout 파일은 자주 사용하는 화면 구성 등을 정의해두고 사용한다. Mustache에서 Layout을 불러올 때는 아래와 같이 적용한다. {{>layout_name}} View Layout의 위치 src > main > resources > templates > layouts

Component HTML 요소 집합을 특정 Function으로 정의하여 축약하는 방법. Function의 return() 구문 내에 HTML 요소 집합을 담는다. Function의 이름이 Component명이 된다. Component 문법을 사용하기 적절한 예 반복적인 HTML 요소들을 축약할 때 내용이 큰 페이지를 쓸 때 특정 HTML 요소들이 자주 변경될 때 Fragment 기법 Function에서 하나의 return 내에 동일한 태그를 병렬로 기입해야 하는 경우 해당 태그들을 또다른 태그로 묶어두거나 묶어두는 태그의 용도가 무의미하다고 느껴지면 형태로 묶어둘 수 있다.

setState state의 내용을 변경하는 함수 변경 시 변경 전 state와 변경될 state를 비교하고, 같으면 동작하지 않는다. Array/Object let [arr, setArr] = [1, 2, 3]; arr은 [1, 2, 3] 배열의 위치를 가리킨다. (c의 포인터처럼) arr의 내용을 바꾸려면? setArr( 변경될 state ) 만약 arr의 첫 번째 값인 1을 5로 바꾸고 싶다면? Array/Object의 값 변경 Array/Object는 값 변경시 원본은 유지하는 것이 좋다. 따라서 변경시 copy본을 만들고 새 state를 구성한다. let copy = arr; copy[0] = 5; setArr(copy); // => 변경되지 않는다. 위와 같이 코드를 작성하면 변경되지 않는다...

onClick html요소에 click시 이벤트 처리를 위한 event handler. // 사용법. // onClick={ function } 형태로 호출한다. // 1. function 정의 1 // 2. function 정의 2 { ... } }> // 3. 미리 정의된 function 호출 setState state는 일반 변수처럼 variable=... 형태로 사용하면 안된다. (html 재렌더링 등 state의 특성을 전혀 사용할 수 없음) state 정의시(useState) 사용한 state변경 함수를 호출하여 값을 변경하는데 이를 setState() 라고 함. // state 정의 let [state, setState] = useState(...);

State란? 자료의 상태를 저장해두는 일종의 변수. useState (https://ko.reactjs.org/docs/hooks-reference.html#usestate) 기본적으로 변수는 let, var, const 형태로 선언하고 자료를 저장해두는 역할을 한다. react는 변수를 state 형태로 저장해둘 수 있는데, 아래와 같이 사용한다. // import useState import { useState } from 'react'; // useState 변수 지정 let [state, setState] = useState(content); 더보기 Destructured 문법 // 일반적인 배열 선언 및 배열의 값을 변수로 할당하는 과정. let num[2] = [1, 2]; let a = n..

JSX? https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org JavaScript에서 HTML에서의 역할을 대신해준다. 기본 JSX 문법 css파일은 App.js 상단에 import 'css 경로'로 css를 import 해준다. class가 필요한 경우 element에 class="class_name"이 아니라 className="class_name"으로 지정한다. 변수를 사용할 때는 중괄호를 사용한다. { variable_name } style을 사용할 때는 style={ { style_name: 'value', ... } }..