Script

1950년대 말, 1960년대 초에 컴퓨터가 프로그래머를 대신해서 더 많은 일을 수행하게 되는 또 다른 움직임이 일어났는데, 바로 특정 프로세서에 독립적인 고수준 프로그래밍 언어의 개발이다. 고수준 언어 고수준 언어를 쓰면 사람이 표현하는 방식에 가까운 용어로 계산과정을 작성할 수 있다. 고수준 언어로 작성된 코드는 번역기 프로그램을 통해 대상 프로세서의 어셈블리 언어로 된 명령어로 변환된 다음, 어셈블러에 의해 비트로 변환되어 메모리에 로드되고 실행된다. 여기서 번역기 프로그램은 보통 컴파일러라고 불린다. 컴파일러 고급 언어로 작성된 프로그램을 번역해서 기계어로 된 프로그램을 만들어주는 번역기이다. ex) C언어로 작성된 코드를 컴파일 하면 어셈블리어로 변환되고 어셈블리어는 기계어로 변환해줌 어셈블리어..

1. props 2. State 3. 전체적인 데이터의 흐름 파악 지난 과제에서 Form 파일은 버튼이 있는 컴포넌트였고 TodoList page 파일은 페이지에 필요한 모든 컴포넌트들을 모아서 합치는 곳이였다. 즉, TodoList가 사실상의 최상위 컴포넌트라고 봐도 무방하며, (저 이미지에는 빠져있지만 TodoList page는 TodoList라는 함수로 싸여있다고 생각하자.) 따라서 global하게 사용해야하는 state가 있다면 이 곳에서 선언하는게 옳다. 위 이미지는 Form이 TodoList page로 부터 state를 받아 사용자에게 받은 input값을 저장 후에 다시 TodoList page로 돌려보내고, Form으로부터 받은 이 state를 List, 즉 버튼을 누르면 생성될 박스들이 놓..

깃허브 주소: https://github.com/jsi7304/TodoList-React 회고: 제목과 같이 Redux 없이 props와 state만을 이용하여 제작했다. 그렇게 진행 한 이유는 다음주차에서 Redux를 배우기 전 props로만 값을 전달하는 고생을 해보면, Redux가 왜 필요한 지에 대해서 깨달을 수 있기 때문이라고 한다. 아직 Redux를 배우기 전이지만 짧게 조사해본 결과, Redux를 사용하면 state들을 한곳에 모아 놓을 수 있는 저장소를 만든 후에 그 곳에서 필요한 곳에 뿌려주는 식으로 진행할 수 있다고 한다. 결론부터 말하자면, Redux의 필요성을 정말 뼈저리게 느꼈다. 파일들을 왔다갔다 하며 state를 전달하고, props를 받고 하다보니 정신을 차릴 수가 없었다. ..

컴포넌트 스타일링 JSX에서 class를 선언하는 법은 간단하다. class 대신에 className을 입력해주면 된다. // src/App.js import "./App.css"; // 반드시 App.css 파일을 import 해줘야 한다. function App() { return ( 안녕하세요 ); } export default App; 그리고 app.css 파일로 가서 원하는 스타일 코드를 입력해주면 된다.

1. 리액트에서의 map 다음과 같은 박스들을 구현한다고 할때 map을 쓰지 않았을 때의 소요를 확인해보자. map 사용 안했을 때 예시) import React from "react"; const App = () => { const style = { padding: "100px", display: "flex", gap: "12px", }; const squareStyle = { width: "100px", height: "100px", border: "1px solid green", borderRadius: "10px", display: "flex", alignItems: "center", justifyContent: "center", }; return ( 감자 고구마 오이 가지 옥수수 ); }; ex..

1.useState + onclick Event Button과 이벤트 핸들러 구현하기 import React from "react"; function App() { // 버튼을 눌렀을 때 하고 싶은 행동 function onClickHandler() { console.log("hello button"); } return ( 버튼 ); } export default App; 위와 같이 버튼을 눌렀을 때 하고 싶은 행동을 함수로 만들 수 있다. 이것의 작동원리에 대해서 살펴보자. 우선, onclickHandler라는 함수를 만들고 onclick={}에 넣어준다. React에서는 이러한 방식으로 함수와 컴포넌트(button 태그)를 연결시킨다. 우리는 이때 이 함수를 이벤트 핸들러라고 표현한다. 위의 경우 버..