Rainyjune Blog

Input Tag 활용 Input tag(input, textarea, select, ...) 사용시 tag 내 값을 다루기 위해 event handler를 사용한다. onChange 이벤트를 사용하는 예제는 아래와 같다. let [inputTagValue, setInputTagValue] = useState(''); // inputTagValue state 정의 ... // e : EventArg // e.Target : 이벤트 호출자. 여기에선 input tag // e.Target.Value : 이벤트 호출자의 값. 여기서는 input tag에 기록된 value { setInputTagValue(e.Target.Value); } }/> 이벤트 버블링 위와 같이 HTML이 정의된 경우 span을 cl..

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