Frontend/엘리스 SW 엔지니어 트랙87 [ 엘리스 SW 엔지니어 트랙 ] 51일차(11주차: React II - CSS in JS, SPA, API연동) 📍 51일차 1.4.화. 실시간 강의 오늘은 React의 form태그, props, 컴포넌트 계층으로 분리, 역방향 state처리에 대해서 배웠다. 50일차 내용에 크게 벗어나지 않아서 난이도가 있지는 않았다. ❏ 이론 부모에서 자식으로 오는 변경된 값은 props 를 사용하고, 자식에서 부모로 가는 값의 변경은 부모에서 내려오는 함수로 값을 전달한다. form 에서 onSubmit 으로 제출 된 값 가져올때는 event.target.name.value 사용하기 ; function submitHandler(event) { event.preventDefault(); const { title, body } = event.target; console.log(title.value, body.value); } u.. 2022. 1. 4. [ 엘리스 SW 엔지니어 트랙 ] 50일차 + 壬寅年 📍 50일 차 22.1.1. 토. 온라인 강의 22년 임인년이 밝았다. 새해를 맞으며 온라인 강의를 들으니까 별 감흥이 없었다. 내게 중요한 목표는 작년부터 준비하고 있는 프런트엔드를 잘 살려서 상반기에는 꼭 취업을 했으면 하는 바람이 있다. 그럼 FE 교육을 들으면서 배웠던 내용을 복습해보자.. ❏ State Hook useState 는 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook 입니다. 최초에 useState 가 호출될 때 초기값으로 설정되며 재 렌더링이 될 경우 무시됩니다. state 는 읽기 전용이므로 직접 수정하지 마세요. state 가 변경되기 위해서는 setState 를 이용합니다. state 가 변경되면 자동으로 컴포넌트가 재 렌더링 됩니다. const App = () => { .. 2022. 1. 2. [ 엘리스 SW 엔지니어 트랙 ] 49일차 📍 49일 차 12.31. 금. 온라인 강의 오늘은 class component와 function component에서 props와 state, event를 다루는 법을 배웠다. function component는 많이 사용해서 익숙했는데, class 문법은 많이 사용하지 않아서 손에 잘 잡히지 않았다. 다루는 법을 배워둬야 나중에 많이 써먹겠지?! ❏ props component 에 원하는 값을 넘겨주고 재사용할 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JS의 요소라면 제한이 없다. 반환되는 JSX 요소가 많으면 props 를 활용하는 것이 중요하다. const Welcome = (props) => { return Hello, {props.name} } const App = (.. 2021. 12. 31. [ 엘리스 SW 엔지니어 트랙 ] 48일차 📍 48일 차 12.30. 목. 온라인 강의 오늘은 react의 useState, props, Hooks, function component, class component등에 대해서 배웠다. 나의 문제, 주변에 쉽게 해결 할 수 있는 작은 기능들을 만들어보자 나중에 도움이 된다.(영우 봇 - 지하철 실시간 도착, 영화 순위) useState 를 consol.log 하면 첫 번째 값은 내가 설정한 값이고 두 번째 값은 state 의 값을 바꾸는 함수다. state 가 바뀌면 해당 컴포넌트는 재 랜더링 된다., props 의 값이 바뀌어도 새로 렌더링 된다. 이때 자식들의 component 까지 재 렌더링 된다. HEAD: 워킹 디렉터리가 누구와 같은지 알려준다. data-attribute : data를 임.. 2021. 12. 30. [ 엘리스 SW 엔지니어 트랙 ] 47일차 📍 47일 차 12.29. 수. 온라인 강의 오늘은 SPA, React, Component, ES6, module, JSX 등에 대해서 배웠다. 바닐라 자바스크립트와 CRA를 통해 프로젝트를 생성할 때 다른 점이 있는데 CRA는 웹팩과 바벨을 자동으로 설정해준다는 것이다. 강의에서 배우는 내용과 별개로 웹팩과 바벨을 설정하는 방법을 공부하고 있는데 세팅이 끝나면 따로 포스팅으로 올려야겠다. 첫 접속시 HTML을 내려받는것은 전통적인 페이지와 동일하나, data 변경시 전체를 새로고침 하지 않고 변경된 data만 업데이트하는 것은 SPA 특징 중 하나이다. React를 사용하면 SPA를 편하게 사용할 수 있다. React: 사용자 인터페이스를 만들기 위한 Javascript 라이브러리 component: .. 2021. 12. 29. 이전 1 ··· 5 6 7 8 9 10 11 ··· 18 다음
