본문 바로가기
반응형

전체 글36

[인턴IN메타] React의 '왜'를 파고들다: 레거시 코드에서 배우는 최신 프레임워크의 본질 아는 것과 '설명할 수 있는 것'의 차이베테랑 개발자일수록 기본기의 중요성을 강조합니다. 저 역시 이번 인턴IN메타 1주 차 React 기본 개념 학습을 통해 그 중요성을 다시 한번 체감했습니다. 익숙하다고 생각했던 개념들이었지만, '왜 그렇게 동작하는가?'라는 스스로의 질문 앞에서 순간 머뭇거리게 되더군요.특히 퀴즈의 오답들은 React가 클래스 컴포넌트에서 함수형 컴포넌트와 Hook으로 진화해 온 이유를 명확하게 보여주는 '살아있는 역사'와 같았습니다. 이 글을 통해 단순히 'state는 변경 가능, props는 불가능'과 같은 단편적인 지식을 넘어, React의 핵심 철학과 발전 방향을 함께 고찰해보고자 합니다. 1. 틀린 문제에서 발견한 성장의 기회: React의 진화와 '왜'기존에 다수의 Rea.. 2025. 7. 13.
[React] map() 함수를 사용한 리스트 렌더링 : key 속성으로 반복되는 컴포넌트를 만들어 보자 1. map() 함수란?map() 함수는 JavaScript 배열 함수 중 하나로, 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환한다. React에서 map() 함수는 주로 배열 데이터를 컴포넌트로 변환할 때 사용된다. JavaScript 사용 예시const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled); // [2, 4, 6, 8, 10]  2. React에서 map() 함수 사용하기React에서 map() 함수는 배열 데이터를 JSX 요소로 변환하는 데 자주 사용된다. 아래의 예시는 사용자 목록을 렌더링한 예시이다. 여기서 users .. 2024. 5. 18.
[HTML/CSS/JS] React를 통해 useState()를 사용해 보자 : 상태를 업데이트 해보자 usdState() 함수는 리액트에서 컴포넌트 요소들의 값을 간편하게 생성하거나 업데이트하는 도구를 제공한다. 아래의 예시를 보자. state라는 변수에 초기값을 0으로 설정 ex) const [state, setState] = useState(0); setState()를 통해 state의 값을 변경할 수 있다. ex) setState(state + 1); 실제 예시를 적용해 보자 See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. useState() 함수를 왜 사용하는 걸까? 그저 변수를 선언하고 변경할 뿐이라면 useState()를 사용할 필요가 있는지 의문이 들 수 있다. 하지만, 많이 사용하는 기존의 방식대로 let이나 var를 통해 변수를 선언하.. 2023. 8. 13.
[HTML/CSS] :root를 통해 CSS에서 변수를 사용해 보자 : 가상 클래스의 활용 CSS를 통해 디자인을 하는 과정에서 페이지의 통일성을 위해 하나의 값을 여러 번 활용하는 경우가 많다. 이러한 경우 :root 가상 클래스를 활용하여 변수를 생성함으로써 코드의 유지·보수나 추가적인 확장을 쉽게 할 수 있다. 아래의 예시를 보자. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. :root 변수의 선언 변수의 이름 앞에는 --(하이픈 2개)를 붙여준다. :root { --width: 200px; --height: 100px; --box-color: #a6a5ff; --box-font-weight: bold; --box-font-size: 20px; } :root 변수의 적용 var() 함수를 통해 괄호 안에 적용할 변수를 입력한다. ... 2023. 6. 25.
반응형