본문 바로가기

전체 글

 (152)
5. 이벤트 처리 💨 이벤트 처리(헨들링) 방법 1) 헨들링 함수 선언 const App = () => { const handleClick = () => { alert("클릭"); } return ( 클릭! ); }; 2) 익명 함수로 처리 const App = () => { return ( { alert('클릭')} }>클릭! ) } 💨 이벤트 객체 const App = () => { const handleChange = (event) => { console.log(event.target.value + "라고 입력하셨네요."); } return ( ); }; - DOM Element 의 경우 핸들링 함수에 이벤트 object를 매개변수로 전달한다. - 이벤트 object 를 이용하여 이벤트 발생 원인, 이벤트가 일어난 ..
4. State 💨 State 란? 문법 const App = () => { const [value, setValue] = useState(초기값); return ... } import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( 버튼을 {count}번 눌렀습니다. setCount(count + 1)}> 클릭 ); } State 는 Component 내에서 유동적으로 변할 수 있는 값을 저장합니다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다. State 값이 변경되고 재렌더링이 필요한 경우 React 가 자동으로 계산하여 변경된 부분을 ..
3. Props 💨 Props 란 ? * 컴포넌트 생성 const Welcome = (props) => { return Hello, {props.name}; } * 컴포넌트 사용 const App = () => { return ; } 기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavasScript의 요소라면 제한이 없다. 주로 Component의 '재사용' 을 위하여 사용합니다. 💨 Props 는 읽기 전용이다. 🥶 DON'T const Welcome = (props) => { props.name = props.name + "님"; return Hello, {props.name}; } Props 의 값을 임의로 변경해서 사용하면 안된다. 😁 DO ..
2. Component 💨 Function Component const MyComponent = ({ childern }) => { return {childern} ; } // 컴포넌트 작성 const App = () => { return ( 안녕 반가워 바이바이 ); } // 컴포넌트 사용 위의 코드에선 Function Component 가 사용되었다. Class Component 또한 사용할 수 있지만, v16 부터 새로운 Function Component 와 Hooks 개념이 발표되었으며, 현재는 Function Component 가 주로 사용되고 있다. 💨 Component의 특징 안녕하세요. 컴포넌트에 Attribute에 해당하는 부분을 Props(Properties) 라고 한다. 컴포넌트 안에 작성된 하위 Eleme..
1. JSX 💨 JSX란? 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 Javascript의 확장 💨 JSX의 특징 1. HTML 태그 내에 JavaScript 연산 * HTML + JS + = * JSX const App = () => { const a = 3; const b = 6; return {a} + {b} = {a+b} } JSX로 코드를 작성할 때 훨씬 간단해진걸 알 수 있다. 2. class -> className { {name}님 안녕하세요. } JSX에서는 class 명을 작성할 때 className으로 해야한다. 3. 스타일은 object로 { {name}님 안녕하세요. } 첫 번째 중괄호는 "여기서부터 자바스크립트를 쓰겠다" 이고, 두 번째 중괄호는 자바스크립트 오브젝트의 시작을 의미한..
11. req.params 과 req.body ✅ req.params 와 req.body 의 차이 req.params // @route GET api/posts/:id // @desc 'get' 메소드를 써서 파라미터 프로퍼티인 id값에 맞는 포스트를 가져오는 요청 router.get("/:id", auth, async (req, res) => { // 'id'라는 프로퍼티 try { const post = await Post.findById(req.params.id); res.json(post); } catch (err) { res.status(500).send("Server Error"); } }); 'api/posts/:id'라는 라우터 경로가 있을 때, 'id'는 'req.params.id'로 불러올 수 있다. req 객체에 'paramete..
10. 구조 분해 할당 ( Destructiong assignment) // Object 구조 let object = { a : "aaaa" }; const a = object.a; // 기존 Javascript 문법 const {a} = object; //ES6 문법 // Array 구조 let arr = ["a", "b"]; let first = arr[0]; let second = arr[1]; // 기존 Javascript 문법 let [first, second] = arr; // ES6 문법
9. 용어 정리 1. 라우팅 특정한 URL을 통해 클라이언트의 요청이 들어왔을 때 그에 맞는 적절한 반응을 취해주는 것이다. express에서는 http request가 들어왔을 경우 mthod type 에 따라 라우팅을 해줄 수 있다. 2. 미들웨어 http request 가 사용자로부터 날라왔을 때 사용자가 요청하면서 보내는 정보(request)와 서버가 보낼 정보 (response) 에접근 가능한 함수이다. app.use('path', function(req, res)=>{ do(something); next(); }); use method를 사용할 경우 http request가 해당 url 로 보내질 경우 method type에 관계없이 반드시 실행된다. next() 는 다음에 실행할 method 가 있으면 다음..

티스토리툴바