NYchicken's blog ;

리액트는 기본적으로 단방향 데이터 흐름을 가진다. 그렇기 때문에 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터로만 형태, 타입을 확인할 수 있다. 해당 데이터가 state로 전달받은 것인지 혹은하드 코딩으로 입력된 데이터인지는 확인이 불가능하다. 상태(state) 끌어올리기란? 상위 컴포넌트의 상태 변경 함수 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 필요가 있다. 이땐 가장 가까운 공통 조상(컴포넌트)에서 state를 끌어올리는 것을 권장한다. 간단한 예제 참고! // 상위 컴포넌트 function LiftingState() { let [todo, setTodo] = useState([]); cons..

여러 컴포넌트 렌더링하는 가장 간단한 방법! function ListComponent(){ const numbers = [1, 2, 3, 4, 5]; const items = numbers.map((number) => { {number} }); return ( {item} ) } 하지만 이렇게만 실행한다면 에러가 발생한다. "key" 는 리스트 엘리먼트를 만들 때 포함해야하는 특수 문자 어트리뷰트이다. 그렇기 때문에 map() 안에서 리스트의 각 항목에 key 값을 할당해 문제를 해결할 수 있다. 짠- function ListComponent(){ const numbers = [1, 2, 3, 4, 5]; const items = numbers.map((number) => { // 각 li 에 key 를..

조건부 렌더링이란? 쉽게 말하자만 원하는 조건에 따라 다른 결과를 렌더링 하는것이다. 이를 위해 JS 연산자 if 나 조건부 연산자를 사용해 현재 상태에 맞는 UI 를 출력한다. 이렇게 두가지의 컴포넌트가 있다고 가정했을 때 function HelloApple(){ return Hello, Apple! } function HelloBanana(){ return Hello, Banana! } 현재 과일에 맞는 컴포넌트를 띄우는 Fruit 컴포넌트이다. fucntion Fruit (props){ const currentFruit = props.fruitName; if(currentFruit === 'Apple') return else return } 엘리먼트 변수 사용하기 변수를 사용해 출력의 다른 부분은 ..

이벤트란? 웹 페이지에서 마우스를 클릭하거나 특정 요소에 포커스가 이동 되었거나 키를 입력했을 때 등 '어떠한 사건을 발생 시키는 것' 을 의미한다. 1. 마우스 이벤트 - click - dbclick(double click) - mouseover, mouseoust - mousedown, mouseup 2. 키 이벤트 - keydown, keyup - keypress 3. 폼 이벤트 - focus - submit 등등 그 이상 참고는 https://ko.javascript.info/introduction-browser-events 여길 하시라! 여기 문서 너무 깔끔하고 보기 좋아서 강추... 🤓 이벤트 핸들러란? 사용자가 이벤트를 발생시켰을 때, 이에 대응하는 이벤트를 발생시키기 위한 함수이다. 이러한..

Component 란? 컴포넌트는 html 을 반환하는 함수이다. UI 를 기능별로 여러 조각으로 나눠 사용할 수 있게한다. 앱의 일부를 렌더링 하는 재사용 가능한 모듈이라고 할 수 있다. Component 선언하기 컴포넌트는 항상 대문자로 시작해야한다. function Hello(){ return hello, this is React! } React 는 파스칼-케이스(pascal-case) 변수 이름을 사용한다. 정규 Html 태그가 아니라는 것을 명시하기 위해서다. 1. 간단한 컴포넌트 예시입니다. function App() { return ( This is title. Hello! This is content area. ); } 2. 같은 JS 파일에서 컴포넌트를 작성했을 시 function App..

state 란? 리엑트에서 state 란 내부에서 동작하는 모든 동적 데이터, 혹은 동적인 상태를 뜻한다. 컴포넌트를 내부적으로 상태 관리할때 사용한다. 리엑트의 state는 정보를 클라이언트 단에 일시적으로 저장하기 위해 만들어졌다. 상태 기반은 event trigger 를 기본으로 동작한다. 데이터를 변화시키는게 아니라, 데이터를 state로 취한 후 새로운 객체(state) 를 반환해 새로운 데이터의 상태를 얻는 개념이라고 볼 수 있다. state 자체는 Object 이며 변수나 데이터를 담을 수 있다! 그리고 이 state 에 들어간 데이터는 변경될 수 있다. state 선언하기 // let [작명(=데이터를 담고있음), 작명(=state의 변경을 도와주는 함수)] = useState(보관할 자료..

React 공식 문서를 공부하며 작성하게 되었다. 모든 예제의 컴포넌트는 신문법인 function 으로 작성될 예정이다. (공식 홈페이지에서도 권장함!) 물론 function 과 class의 기능적 차이는 크지 않다. 하지만 useState 같은 Hook을 자주 사용하게 된다면 function 에 유용한 기능이 더 많고, LIfecycle Hook을 더 자세하게 쓰고 싶다면 class 컴포넌트를 사용하면 된다. 참고하시길 ^v^! 1. JSX 란? const element = Hello, world!; 이 문법은 문자열도 아니고, HTML 도 아니다. Javascript 를 확장한 문법으로, Javascript 안에서 HTML 문법을 사용해 View 를 구성 할 수 있게 하는 자바스크립트 문법이다. 사용..