나보단 잘하자

리액트를 사용하다 보면 필수적으로 이용되는 문법이 export와 import이다. 하지만, export의 사용과 import의 사용이 제각각이라 이를 정리하려고 한다. 모듈이란? 모듈은 마치 레고의 한 조각과 같다. 리액트가 각광받는 이유도 컴포넌트 하나하나를 각각 관리할 수 있기 때문이다. 과거 바닐라 자바스크립트로 처음 자바스크립트를 접했던 때를 떠올려보면, script.js 하나로 수 많은 html 파일의 스크립트 로직을 짰던 기억이 있을 것이다. 어떻게 연결 돼 있는지 읽기조차 힘든 긴 script.js 파일 하나를 여러개의 모듈로 쪼개고, 해당 스크립트에 적용하는 jsx도 따로 분리해 가독성도 유지보수도 편리해 진 것이다(물론 바닐라자바스크립트로도 모듈을 사용하지만, 리액트가 컴포넌트를 적극적으..

리액트 훅으로 시작하는 개요 리액트 훅에 useState 라는 API가 있다. useState는 최초의 상태값을 갱신해주는 역할을 한다. 아래와 같이 쓴다. const [state, setState] = useState('default'); 첫번째 state는 최초의 상태값이며 최초 값은 오른쪽 useState의 인자로 설정해준다. setState는 그 다음 설정할 값들을 받는다. 디폴트에서 계속 1을 더한다거나 하는 것. 하지만 이 형태는 구조 분해 할당 이라는 문법을 이용해 만들어진 형태이다. 구조 분해 할당이 없다고 생각해보자. 그렇다면 useState API는 아래와 같은 형태 일 것이다. const stateArr = useState('default'); const state = stateArr..

콜백함수. 말 그대로 부르면 오는 함수다. 콜백함수를 학습하기 전에, 동기와 비동기에 대해 알아보고 가자. 1. 동기 vs 비동기 동기적 처리 : 코드의 실행은 위에서 아래로 순차적으로 실행되는 것이 원칙이다. 동기적 처리는 코드의 요청과 함께 실행된 결과가 나타나야 한다. 때문에, 실행이 오래걸리는 로직의 순서가 오면 해당 로직의 결과가 나타날 때 까지 다음 로직들은 아무것도 못한 채 대기해야 한다. 쉬운 예를 들자면, 테이블링이나 번호를 적으면 순서에 문자를 보내주는 방식등이 없는 맛집에서 식사를 하기 위해 오로지 자신의 순서가 올 때 까지 주구장창 줄을 서 기다리는 상황이 될 수 있겠다. 비동기적 처리 : 코드가 순차적으로 실행되다가, 어떤 무거운 로직이 걸려도, 해당 로직이 로딩되는 동안 다음 순..

삼항연산자는 조건문을 축약해서 쓰는 것으로 유명하다. 맛보기 function normalOne(num) { if (num > 0) { return "0보다 크다" } else { return "0보다 작다" } } normalOne(3);//0보다 크다 function ternary(num) { return ((num > 0) ? "0보다 크다" : "0보다 작다"); } ternary(3);// 0보다 크다 확 줄었다. 문법 조건 ? 조건이 true이면 반환 : 조건이 false면 반환 활용 - 결과를 변수에 할당 시키기 const ranNum = 5; let varAfter = ranNum > 4 ? "true" : "false"; console.log(varAfter); //true - 한 조건에 ..