![[React.js] Hooks - useState .04](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbyPAvj%2FbtqQLkVfCyE%2FkUZfsuG0cVjLj8pffH23f0%2Fimg.png)
오늘부터 작성할 내용은 React Hook입니다. 클래스형에서 함수형 컴포넌트으로 작성할 것을 권장하면서 등장한 아이들 입니다. 그 중 가장 중요하면서 많이 사용하는 useState에 대해서 알아보고자 합니다. 🤔 useState? state를 만들고 관리하기 위해 도움을 주는 Hook입니다. 로그인 상태를 관리하거나, 아이템들을 관리하는 등의 여러가지 상태를 관리할 수 있습니다. 말보단 직접 보고 만들어 보는게 제일 좋으니 바로 코드를 보시죠! const [state, setState] = useState(defaultState); 위 코드블럭이 useState의 기본 코드입니다. useState는 두 개의 값을 return 해줍니다. 구조분해할당 문법으로 state와 setState에 각각 리턴된 값..
![[칼럼] M1 맥북 살까? 말까?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDWD7i%2FbtqQlJU2rY3%2F668SXQLtPo547iDmcFyrE0%2Fimg.jpg)
안녕하세요. RyuWoong입니다.올해 출시한 애플 제품 중에 가장 눈에 띄고 새로운 시장을 이끈다고 생각하는 실리콘 맥에 대하여 이야기 해볼까 합니다. 여러 리뷰와 반응을 보고 제 생각을 담아 작성합니다. 😲 실리콘 맥의 등장.WWDC2020에서 애플은 ARM 기반의 실리콘을 발표했습니다. 그리고 2년 안에 생태계를 인텔에서 실리콘으로 이주하겠다고 언급했죠. 여러가지 의문 부호가 붙었지만, 11월 11일(현지 날짜로 11월 10일) 실리콘을 발표했고, 기대보다 뛰어난 성능을 보여주었습니다. 후에 나온 IT 리뷰어들의 리뷰와 평을 보면 M1 실리콘 맥북의 실 사용 성능은 2020 인텔 맥북 13인치 프로와 비교하여 비슷하거나 뛰어 넘는 성능을 보여주는 것 같습니다. 특히 인텔 맥북에 비해 M..
![[Algorithm] 알고리즘? .00](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fl6kJE%2FbtqP4kCgPGm%2FKk8OCFNqjkGbMICRC28xRk%2Fimg.jpg)
안녕하세요! 깜뭉이입니다. 해당 카테고리에서는 Algorithm에 대해 공부하고 배운 내용을 정리 및 저장 합니다. 제가 참조하는 책은 자료구조와 함께 배우는 알고리즘 입문 자바편이며, 코드는 파이썬으로 작성할 예정입니다. 저처럼 기초 알고리즘 공부를 함께 하실 분에게 도움이 되길 바라며, 그럼 시작해볼까요? 😵 알고리즘이란? 문제를 해결하기 위해 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것, 계산을 실행하기 위한 단계적 절차를 의미합니다. 간단한 예제와 함께 이야기 해봅시다. Q. 입력한 내용을 출력해봅시다. value = input() print(value) 위 코드를 작성하면 값을 입력할 수 있습니다. 아무 값을 입력하고 Enter를 누르면, 입력한 값이 출력됩니다. Q. 두 값을 비교해..
![[React.js] Check ES6 .03](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIaaXd%2FbtqQbGyNuCz%2FzN7yPjdNvlYttnAJe96Rak%2Fimg.png)
React Hook을 하기 앞서 ES6문법 중 필수적이라고 생각되는 것 몇개만 짚어볼까 합니다. 처음 제가 Hook을 공부할 때 ES6문법이 많이 나와서 엄청 당황했었던 기억이 있습니다! 그 중 꽤 자주 사용하는 문법을 한 번 더 확인해볼까요? ✔ const와 let 기존에 사용하던 var는 함수레벨 스코프(Fucntion-level Scope), var 키워드 생략 허용, 변수 중복 선언 허용, 변수 호이스팅과 같은 단점을 지니고 있는데 특히 Scope(유효 범위)가 넓은 것은 문제를 발생시킬 확률이 큽니다. 이러한 이유들로 const와 let 키워드를 도입하게 됬다고 합니다. 아래 링크에서 더 자세한 내용을 확인해보세요.. let, const | PoiemaWeb ES5까지 변수를 선언할 수 있는 유..
![[React.js] Start React! .02](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fsebzh%2FbtqPwnM28Ov%2FvLANZpYbxdOsKaSIAlGvYk%2Fimg.png)
이번 장부터 React를 제대로 시작해보겠습니다. 자, 새로운 리액트 프로젝트를 만들어봅시다. 이전에 Ready to React .00 에서 만든 프로젝트를 사용하셔도 좋고 한 번 더 따라하셔서 새로 만드셔도 좋습니다. React 파헤치기🤩 src/App.js 파일을 열어볼까요? //src/App.js import logo from './logo.svg'; import './App.css'; function App() { return ( 내에 index.js를 통해 연결되어 App.js가 들어가게 되는겁니다. 그 덕에 우리는 App.js 안에 컴포넌트를 추가하여 작성하면서 만들면 쉽게 React 어플리케이션을 만들 수 있습니다. React.StrictMode는 뭔가요? ❗️ 공식 홈페이지에 설명이 잘 나..