✍ React JS(FACEBOOK)를 사용하는 이유
- 전 세계 웹 개발 분야 중 규모가 큰 탑 10,000개의 회사 중 약 42.23% 사용 중
- Build With : https://trends.builtwith.com/javascript/React
- FACEBOOK이 현재까지 REACT JS에 투자 중 - 지속적인 발전
- 자바스크립트 언어 기반이기에, 커뮤니티가 방대함
- 코드가 간편해지고 유지보수가 쉬워짐 (Divide and Conquer)
✍ JSX는 무엇인가?
JSX란 자바스크립트 XML으로, 간단하게 얘기하자면 자바스크립트를 확장한 것이며 React JS 내에서 HTML을 사용할 수 있게 도와준다.
📝 JSX의 특징
- React 사용에 도움을 준다.
{}안에 JS 문법 또는 React 변수들을 사용할 수 있게 도와준다.- HTML을 사용하기 위해서
()를 사용한다. - React 요소들을 생성한다.
- XML 규칙들을 따른다.
- 컴파일 이후, JSX는 자바스크립트 함수 호출로 변환된다.
Note : JSX는 React 내부에 HTML을 쉽고 빠르게 적용 가능하도록 도와주며 appendChild()나 createElement()와 같은 메서드를 쓰지 않아도 DOM 내부에 HTML요소를 추가 할 수 있고 인젝션 공격으로 유명한 XSS를 예방할 수 있지만 HTML에 많이 의존하고 있어 HTML 문법을 제대로 쓸 수 있어야 한다.
✍ useState
- 기본적으로 데이터가 저장되는 곳
- useState(default value) => [default value, modifier]
- default value는 initial value
- modifier는 default value에 영향을 주는 함수
Example!
const [amount, setAmount] = React.useState(0);
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onFlip = () => {
reset();
setFlipped((current) => !current);
};위 코드를 예제로 설명을 해보자면, useState() 괄호 안에 들어가는 0 또는 false는 초기 값을 뜻하며, 이러한 초기 값에 영향을 주는 함수들은 각 각 setAmount와 setFlipped 함수이다.
즉, 첫 번째 useState가 적용된 컴포넌트에 만약 amount를 변수로 넣게 되면 그 변수의 값은 처음에는 0이 겠지만 setAmount가 실행 됨에 따라 amount값이 변하게 된다.
✍ useEffect
- 특정 코드의 랜더링을 제한하는데 도움을 주는 함수이다.
- useEffect(function, [??]) 형식으로 사용되며, function에는 말그대로 함수를, 배열 내부에는 dependency를 준다.
Example!
const [counter, setValue] = useState(0);
const onClick = () => setValue((prev) => prev + 1);
console.log("Repat at every single rendering");
const initializeAPI = () => {
console.log("Call An API");
};
useEffect(initializeAPI, []);
useEffect(() => {
console.log("SEARCH FOR", keyword);
}, [keyword]);위 코드를 예제로 설명을 해보자면, 처음 저 코드가 들어있는 페이지가 rendering 되었을 때 보든 코드들은 한 번씩 실행이 된다.
하지만 그 이후는 어떨까? 일반적으로 특정 제약을 건것이 아니라면, 이벤트가 실행될 때 마다 React는 페이지를 자동적으로 rendering하지만 useEffect로 감싸준(?) 함수의 경우, 뒤에 들어가는 dependency에 따라 함수의 실행 여부가 결정된다.
첫 번째 useEffect(initialize API, [])의 경우에는 dependency가 없기 떄문에 페이지가 랜더링 되는 처음에만 실행되고 그 이후에는 실행되지 않는다.
두 번쨰 useEffect(function, [keyword])는 dependency가 [keyword]이므로 keyword가 입력됨에 따라 function이 실행되게 된다.
이런식으로 이벤트를 관리하게 되면, 쓸데없는 API호출 또는 함수 실행을 줄일 수 있어 랜더링을 효율적으로 할 수 있게 된다.
=> useEffect를 쓸 떄, 한 가지 알아둬야 할 것은...defaul는 절대 never 직접적으로 값을 바꾸지 않는 것이다.
✍ Props & Component
Component란 독립적이며 재사용이 가능한 코드들의 집합으로 React JS 내에서는 자바스크립트 함수처럼 기능하지만 독립적인 html 구조이다.
=> React에서 Component는 무조건 대문자로 시작해야 한다.
Props란 컴포넌트가 만들어진 후, 컴포넌트의 변화를 주기 위한 속성 값들을 뜻한다.
<Btn words={value} editValue={editValue} />여기서는 words와 editValue가 props라고 생각하면 된다.
- 속성 값들은 바로 적용이 되지 않기에 컴포넌트에 끌어다가 적용해야 한다.
📝 React Memo
useState로 인해 상태가 변하게 되면 컴포넌트들은re-rendering하게 되는데 상태가 변하지 않는 컴포넌트들, 즉 props의 변화가 없는 것들은React.memo()로re-rendering을 방지 할 수 있다.
✍ React 사용시 편리한 Module/Package
- React Router : 페이지와 페이지를 연결해주는 요소
- PropType : 마치 타입스크립트와 같이 프롭스의 타입을 정의해준다.
