Developer

파이썬 02 파이썬 시작

Ayel — Sun, 12 Apr 2026 14:17:28 +0900

파이썬의 시작

1. 파이썬의 기원

1) 파이썬의 개발 배경

- 1991년 히도 판 로쉼(Guido van Rossum)이 개발

- 네덜란드 암스테르담 대학에서 컴퓨터 전공

- 크리스마스 휴가 기간 프로그래밍 프로젝트에서 시작

- 코미디 'Monty Python's Flying Circus'를 따서 명명

- 파일관리, 프로그램 실행, 반복 작업 자동화 등의 기능을 수행하는 언어 체계 용도로 개발

- 프로그래밍을 더욱 인간 친화적이고 접근 가능한 분야로 혁신적으로 변화

2) 파이썬의 기본 철학

- 읽기 쉽고 간결한 문법

- 프로그래밍 패러다임, 문법에 따라 다양한 표현 가능

- 다중 프로그래밍 패러다임 채용

- 알고리즘을 프로그래밍 언어로 표현하는 접근 방식

- 명령형 프로그래밍, 절차적 프로그래밍, 객체지향 프로그래밍, 함수형 프로그래밍 패러다임 등

- 다목적 활용: 응용 프로그램, 웹/백엔드 개발, IoT, 데이터과학, 인공지능&딥러닝 뿐만 아니라 교육 목적으로도 활용

2. Pythonic

1) Pythonic의 의미

: 단순히 파이썬으로 작성된 코드가 아닌

명료하고 아름답게 문제를 해결하는 사고방식을 의미

-> 독립적, 인간적, 직관적, 효율적, 개방적

2) 플랫폼 독립적

- Write Once, Run Anywhere

- 하드웨어나 시스템 구조에 비의존적

- Window, macOS, Linux 등 운영체제(플랫폼)에 관계없이 동일한 코드 실행이 가능

-> 인터프리터가 각 OS에 맞게 코드 해석

- 표준 라이브러리&가상환경 지원

- 다양한 플랫폼에서 동일 기능 수행

- 개발 환경을 손쉽게 복제, 이식 가능

3) 인간적&직관적

- 인간 중심의 철학

- 명확함과 가독성을 가장 중시

- 초보자에게 친숙하고 전문가에게도 강력한 언어

- 실행할 수 있는 의사 코드(Executable Pseudocode) 수준의 문법

- 영어 문장처럼 읽히는 코드 구조

- 불필요한 기호 없이 의미 중심의 구문 설계

4) 효율적

- 간결하지만 강력한 표현력

- 풍부한 표준 라이브러리

5) 개방적

- 많은 개발자의 의견을 수용하고 토론하며 발전하는 언어

- 오픈소스 생태계를 통한 공유, 재사용, 확장성 강화

- 풍부한 커뮤니티 자료로 문제 해결 속도 향상

- 대형 커뮤니티를 기반으로 선순환 구조의 생태계 구축

- 새로운 기능, 라이브러리를 지속적으로 개발, 공유

- 공식 문서, 포럼(Stack Overflow, Reddit 등), GitHub 등을 통해 문제 해결과 학습자료 공유

- 수십만개의 라이브러리가 거의 모든 분야를 지원

파이썬 개발 환경

1. 파이썬의 언어적 특징

: 플랫폼 독립적, 인터프리터식 객체지향적, 동적 타이핑(dynamically typed) 대화형 언어

- 윈도우, 리눅스, 유닉스, 맥OS 등 다양한 운영체제(플랫폼)에서 별도의 컴파일 없이 실행 가능

- CPython, PyPy, Cython, Jython 등 다양한 인터프리터 환경 사용 가능

- 프로그램을 객체로 모델링

- 변수의 자료형을 지정하지 않음

- 작성한 코드에 대한 수행 결과를 바로 확인하고 디버깅하면서 코드 작성 가능

2. CPython

1) C 언어로 개발된 파이썬 인터프리터

- 파이썬 표준 라이브러리, 대부분의 패키지들이 CPython을 기준으로 개발, 테스트됨

- C 구현 라이브러리와의 연동을 통한 확장에 최적

2) 오픈소스 커뮤니티의 기여로 지속적 발전

ex. https://github.com/python/cpython

GitHub - python/cpython: The Python programming language

The Python programming language. Contribute to python/cpython development by creating an account on GitHub.

github.com

3. 파이썬 프로그램 실행과정

1) 파이썬 애플리케이션은 소스 코드 형태로 배포

- CPython이 컴파일 후 바이트코드.pyc 파일 생성

- 파이썬 가상머신은 바이트코드를 한 라인씩 실행

- 변경없이 재실행 시 바이트코드로 빠르게 실행

4. IDLE 개발환경

1) IDE(IDLE)

: 파이썬 인터프리터에 기본으로 포함된 파이썬 통합 개발 환경

- 파이썬과 Tkinter GUI 툴킷으로 개발

- 구문 강조, 자동 완성, 스마트 들여쓰기 등이 포함된 단순한 IDE 지향

- stepping, breakpoint, call stack을 확인할 수 있는 통합 디버거 환경 제공

- 파이썬 공식 홈페이지에서 다운로드 가능

c.f. http://www.python.org

Welcome to Python.org

The official home of the Python Programming Language

www.python.org

2) 주피터 노트북(Jupyter Notebook)

: 오픈소스 기반의 웹 플랫폼

- 파이썬을 비롯한 40여개 프로그래밍 언어 지원

- 전통적인 소스코드-컴파일 -실행 방식에서 벗어나 웹 기반 대화형 개발 및 실행 환경

- 문서화하여 다른 사람과 공유하기가 편리

- 마트다운(Markdown)을 이용해 코드 관련 타이틀, 설명 등 작성 가능

- https://jupyter.org/

Project Jupyter

The Jupyter Notebook is a web-based interactive computing platform. The notebook combines live code, equations, narrative text, visualizations, interactive dashboards and other media.

jupyter.org

3) 구글 Colab(Google Colaboratory)

: 클라우드 기반 파이썬 개발 환경

- 2017년 과학 연구와 교육 목적으로 개발

- 주피터 노트북+구글 드라이브를 결합한 서비스

- 노트북 파일을 공유하여 협업 코딩 가능

- 고성능 컴퓨팅 리소스 제공

- CPU, GPU, TPU와 같은 고성능 연산 장비 활용 가능

- https://colab.research.google.com/

Google Colab

colab.research.google.com

파이썬 기초 문법

1. 데이터 타입

- 데이터가 어떤 종류의 값을 가지는지 구분

- 값의 성질과 연산 방식을 정의

1) 숫자 데이터 타입

- 정수(interger): 소수점이 없는 숫자

- 실수(floating point): 소수점이 포함되는 숫자

2) 문자 데이터 타입

- 유니코드(unicode) 기반의 문자열(string)

- 인용 부호 " 또는 '를 사용해 표현

2. 에코(echo)

: 입력으로 들어온 값을 아무 변화 없이 그대로 출력해 주는 기능

3. 함수(function)

1) 함수

: 사전에 정의된 특정 작업을 수행하는 명령문의 집합

- 함수의 이름만으로 호출해 실행할 수 있는 단위

ex.

print(): 화면에 데이터를 출력하는 작업

input(): 사용자 입력을 통해 데이터를 저장

2) 함수 사용 형식

ex. print("Hello World!")

print()	함수명
"Hello World!"	입력값(파라미터)

3) 수학식 계산

- 파이썬 인터프리터는 숫자(int, float 등)에 대해 수학적 연산(덧셈, 뺼셈, 곱셈, 나눗셈)을 자동적으로 수행

ex.

print(25+7)

print(5/2)

print(52*4)

- 괄호를 사용해 여러 연산자의 연산 순서 결정

ex. print((10.5-2*3)/(45-5.2))

4. 들여쓰기

- 파이썬은 들여쓰기에 의존적인 언어

- 타 프로그래밍 언어에서는 가독성 향상 목적

- 파이썬에서는 코드의 논리적 집합인 블록을 표현

- 들여쓰기는 스페이스 4칸 권장(PEP 8)

- 블록 중첩 시 추가적인 4칸 들여쓰기 삽입

print("파이썬")
print("파이썬은")
	print("들여쓰기 의존적 언어")
print("화이팅")

5. 프로그래밍 스타일과 문서화

1) 공백 사용

- 적절한 공백 사용으로 가독성 증대

2) 주석(commet) 사용

- 프로그램의 실행에는 영향 없음

- 코드의 의미를 설명하기 위해 작성하는 코드의 요소

* 파이썬은 인간 친화적이고 간결함을 목표로 설계된 언어로, 읽기 쉽고 명료한 코드를 작성하는 것을 핵심 가치로 삼는다.
* 파이썬은 운영체제에 관계없이 동일한 코드가 실행되는 플랫폼 독립적 언어이다.
* 파이썬 소스 코드는 인터프리터에 의해 바이트 코드로 변환된 후 파이썬 가상 머신 위에서 실행된다.

* 데이터는 성질에 따라 정수, 실수, 문자열 등으로 구분

* 파이썬은 변수 선언 시 자료형을 지정하지 않아도 되는 동적 타이핑 언어이다.

* 파이썬에서 들여쓰기는 단순한 가독성을 넘어, 코드의 논리적 블록을 구분하는 문법적 필수 요소이다.

파이썬 01 컴퓨터와 프로그램

Ayel — Sun, 12 Apr 2026 12:34:54 +0900

컴퓨터의 구성

1. 컴퓨터가 다루려고 하는 대상

-> 데이터, 정보

1) 데이터(data)

: 관찰이나 측정을 통해 얻은 수치, 문자 형태의 표현할 수 있는 또는 양적 값

2) 정보(information)

: 획득한 데이터를 처리해 실제 문제 해결이 도움이 되도록 변형된 데이터 또는 결과물

현상 > 관찰/측정 > 데이터 > 처리/가공 > 정보

3) 컴퓨터

: 사전에 정의된 절차에 따라 입력 데이터를 자동으로 처리해 정보를 생산하는 기계

2. 컴퓨터의 구성요소

: 하드웨어+소프트웨어

1) 하드웨어: 컴퓨터를 구성하고 있는 물리적 부품(처리장치)

2) 소프트웨어: 다양한 장치들을 동작시켜 특정 작업을 해결하는 프로그램

3) 하드웨어의 물리적 구성

CPU, ODD, RAM, HDD, Video Card

4) 하드웨어의 논리적 구성

- 기계를 바꾸지 않고 소프트웨어 교체만으로 무엇이든 할 수 있게 만든 컴퓨터의 기본 설계

- 역할에 따라 입력, 기억/저장, 제어, 연산, 출력 장치로 구분

* 폰 노이만 구조

5) 소프트웨어의 구조

: 각각의 고유한 기능을 수행하는 하드웨어가 언제 어떻게 동작하여 문제를 해결할 수 있는지 지시하는 명령어 집합

* 응용 소프트웨어: 사용자의 업무나 목적에 맞게 문제 해결을 위한 처리 절차를 표현한 명령어 집합

* 시스템 소프트웨어: 하드웨어를 제어, 관리하여 응용 소프트웨어를 실행할 수 있는 호나경을 제공

ex. 운영체제, 컴파일러, 유틸리티 등

하드웨어의 구성

1. 컴퓨터와 2진법

1) 컴퓨터와 2진법

: 컴퓨터는 트랜지스터를 통해 2진법 숫자로 데이터를 표현해 저장 및 처리

2) 데이터의 기본 단위

- bit(binary digit)

- byte

-> 트랜지스터를 그대로 사용하고 있기 때문에 지금도 2진법을 사용

2. 하드웨어의 구성

1) 기억장치(주기억장치)

- 데이터와 프로그램 및 처리 결과를 임시적으로 기억을 담당하는 컴퓨터 작업 공간

- 저장장치의 순차적 접근과 달리 무작위 순서로 빠른 접근 가능

- ROM: 읽기전용. 전원차단 시 기억내용 보존

- RAM: 읽기/쓰기 모두 가능하며, 전원차단 시 초기와

2) 저장장치(보조기억장치)

- 전원이 소실되어도 저장된 정보가 훼손되지 않는 영구적 기록 장치

- 현대 컴퓨터 장치에서는 HDD가 기본 저장장치

3) 입력장치

: 키보드, 마우스 등

4) 출력장치

: 모니터, 프린터 등

5) 제어/연산 장치

: 명령어와 데이터를 읽고 데이터를 연산 또는 처리하는 장치

- CPU: 레지스터, 연산 논리 유닛(ALU), 제어 유닛(Control Unit)으로 구성

6) 메인보드/마더보드

: 각 컴퓨터 장치를 연결해주는 회로를 갖춘 장치

프로그램의 실행

1. 프로그램의 개념

- 컴퓨터는 자의적으로 데이터를 처리해 정보를 생산하는 것이 불가능

-> 주어진 문제를 풀기 위해 단계적 절차를 명시한 지시서 필요

-> 각 단계별 필요한 하드웨어를 사용해 결과 생성

- 소프트웨어, 응용프로그램, 애플리케이션 등 다양한 용어로 불림

- 유사한 유형의 여러 문제를 추상화한 알고리즘(algorithm)을 구현한 결과물

2. 알고리즘(Algorithm)

1) 알고리즘의 정의

- 문제를 해결하기 위한 단계별 절차를 체계적 명령의 형태로 기술한 것

- 주어진 명령어를 처리하는 컴퓨터에게 문제를 해결하도록 만드는 정형화된 절차

2) 정렬 알고리즘: 우열을 비교할 수 있는 데이터로 일정한 순서대로 정렬 또는 순서화

- 선택정렬 알고리즘

3. 프로그래밍 언어

1) 프로그래밍 언어란?

- 사람과 컴퓨터 사이의 의사소통 도구(인터페이스)

- 프로그래머는 컴퓨터가 이해할 수 있는 언어를 사용해 프로그램을 작성

2) 프로그래밍

- 문제해결을 위한 절차인 '알고리즘'을 '프로그래밍 언어'로 작성하는 과정

3) 프로그래밍 언어의 분류

- 저급언어

- 고급언어

저급언어		고급언어
1세대	2세대	3세대	4세대
기계어	어셈블리어	Python, C, Java, Rust	Visual Basic
0과 1	명령어 영어 대체	자연어와 유사	자동화

4) 프로그램의 실행

: 고급 언어로 작성된 프로그램은 기계어밖에 인식할 수 없는 컴퓨터에 의해 실행 불가능

-> 컴파일러 또는 인터프리터 사용

* 컴퓨터는 사전에 정의된 절차에 따라 입력된 데이터를 가공, 문제 해결에 유용한 정보로 변환하는 기계

* 컴퓨터는 하드웨어와 소프트웨어로 구성

* 컴퓨터 하드웨어는 역할에 따라 입력, 기억·저장, 제어, 연산, 출력의 5가지 장치로 구분되며, 이를 폰 노이만 구조라고 한다.
* 소프트웨어(프로그램)는 문제를 해결하기 위한 단계별 절차인 알고리즘을 컴퓨터가 이해할 수 있는 명령어로 구현한 결과물

* 컴퓨터는 모든 정보를 비트로 처리하며, 8개의 비트가 모여 문자와 숫자를 표현하는 기본 단위인 바이트가 된다.
* 사람이 사용하는 자연어와 유사한 고급 언어로 작성된 '소스 코드'는 컴파일러나 인터프리터를 통해 컴퓨터가 이해할 수 있는 기계어로 변환되어 실행된다.

통계학개론 01 데이터와 통계학(1)

Ayel — Thu, 2 Apr 2026 22:33:33 +0900

통계학이란

1. 통계학

: 데이터에 관한 학문

- 불확실한 현상을 이해하기 위해 데이터를 수집하고, 데이터 패턴을 요약하고, 분석하여

-> 불확실한 현상에 대한 결론을 찾는 학문

- 데이터란 세상을 이해하는 창

- 어떤 현상을 이해하기 위해 그 현상을 관찰해 데이터를 수집

- 전통적인 데이터 수집 방법: 관찰, 설문조사, 실험 등

- 현대의 데이터 수집 방법: 컴퓨터와 정보통신 기술의 발달로 매일 방대한 양의 데이터가 생산됨

-> 데이터 폭발

=> 데이터에서 쓸모있는 정보를 얻기 위한 별도의 과정이 필요

2. 통계학의 역할

1) 데이터 수집

: 알고 싶은 현상을 왜곡되지 않게, 잘 반영하는 데이터를 수집하기 위해 통계적 원리를 사용

2) 데이터 요약

: 데이터가 가진 특징과 패턴을 정확하고 효과적으로 드러내기 위한 통계적 방법을 사용

-> 기술통계

3) 추론

: 데이터를 이용해 우리의 관심 대상에 대해 추측하고 그 추측의 신뢰성을 계량화

-> 추측통계(추론통계)

3. 데이터의 요소

1) 데이터: 하나 이상의 변수에 대한 관찰값의 모음

2) 데이터의 기본 요소

- 단위(unit): 관측되는 개별 대상

- 변수(variable): 각 단위에 대해 관측되는 특성

- 관찰값(observation): 각 단위로부터 관측한 특성의 값

통계학의 주요 개념

1. 모집단과 표본

1) 모집단(pupulation)

: 관심 대상이 되는 모든 개체의 모임

2) 표본(sample)

: 모집단을 알기 위해 실제로 관측한 모집단의 일부

2. 모수와 통계량

1) 모수(parameter)

: 모집단의 특성을 나타내는 대푯값

2) 통계량(statistic)

: 표본의 특성을 나타내는 대푯값

3. 모집단과 모수

1) 모집단: 대부분의 경우 모집단은 너무 커서 모든 개체를 조사할 수 없다

2) 모집단의 종류

- 유한 모집단: 개체 수가 유한개

- 무한 모집단: 개체 수가 무한개

3) 모수

- 값이 고정되어 있다

- 대부분의 경우 값을 알 수 없다

cf. 예외: 개체수가 작은 유한모집단인 경우 모든 개체를 조사하면 모수를 알아낼 수 있다

4. 표본과 통계량

1) 표본

: 모집단을 잘 반영하는 표본을 뽑는 것은 매우 중요

2) 단순랜덤표집(sample random sampling)

: 유한모집단에서 n개의 개체로 이루어진 가능한 모든 부분집합이 표본으로 선택될 확률이 같도록 설계된 표본 표집 방법

3) 통계량

- 모수를 추정하기 위해 표본에서 얻은 값

- 표본을 새로 뽑으면 통계량의 값이 달라질 수 있다

R의 데이터 형태와 연산

1. 객체의 생성과 저장

객체명<-저장하고싶은값

2. 벡터(vector)

1) 벡터: 어떤 요소(값)들이 일렬로 늘어선 것

2) 벡터를 만드는 법

- c() 함수 안에 벡터의 각 요소를 쉼표로 구분해 넣는다

- seq() 등의 함수를 이용한다

height<-c(165, 151, 162, 160, 151, 152, 159, 163, 143, 161)
d<-1:9	1부터 9까지 나열
e<-seq(1, 9, 2)	1에서 9까지 2씩 나열
f<-rep(10, 5)	10을 5번 반복
g<-c(d, f)	d와 f가 들어간 벡터
h<-c(4:1, seq(0, 9, 3))	4부터 1까지 나열하고 0부터 9까지 3씩 나 ->함수를 섞어 사용하는 것도 가능

3) 벡터의 연산

: 벡터들 간 사칙연산 가능

- 벡터의 길이가 같은 경우: 각 벡터에서 같은 위치에 있는 숫자끼리 연산

- 벡터의 길이가 다른 경우: 길이가 짧은 벡터의 각 요소를 앞에서부터 재활용하면서 연산(경고메세지 출력)

3. 데이터형

- 숫자형: 사칙연산 가능

- 범주형: factor() 또는 as.factor()를 이용해 생성

- 문자형: as.character()를 이용해 생성

- 논리형: TRUE 또는 FALSE 값을 가짐

4. 행렬(matrix)

: 벡터 여러개의 모임

- 행렬의 요소들은 데이터형이 모두 같아야 한다

- cbind(), rbind(), matrix() 함수를 이용해 생성

1) 행렬의 연산 가능

- 행렬의 곱셈: %*% 형태로 사용

- solve() 역행렬

2) 행렬의 일부 값 출력

- s[1, 2]: 1행 2열 값

- s[1, ]: 1행 모두 출력

- s[, 2]: 2열 전체 출력

- 행렬과 비슷하나 데이터형이 다른 벡터들도 하나의 데이터프레임에 저장 가능

- data.frame() 함수를 이용해 생성

- dat$name: 데이터프레임을 불러낼 수 있다

https://developernew.tistory.com/453

R과 RStudio 설치 및 시작

R이란 - 통계 분석과 그래프 작성에 쓰이는 무료 소프트웨어- Windows, MacOS, Linux 등 다양한 컴퓨터 환경에 쉽게 설치, 사용 가능- R development core team에 의해 유지, 개선 - 누구나 새로운 함수를 개발

developernew.tistory.com

R과 RStudio 설치 및 시작

Ayel — Thu, 2 Apr 2026 22:02:33 +0900

R이란

- 통계 분석과 그래프 작성에 쓰이는 무료 소프트웨어

- Windows, MacOS, Linux 등 다양한 컴퓨터 환경에 쉽게 설치, 사용 가능

- R development core team에 의해 유지, 개선

- 누구나 새로운 함수를 개발해 '패키지' 형태로 공유 가능

-> 상업용 소프트웨어에 비해 다양한 분석 가능

R 다운로드

CRAN(https://cran.r-project.org)

https://cran.r-project.orgg

: 컴퓨터 사양에 따라 필요한 것으로 다운로드

: 처음 설치하는 사람은 base로 설치

-> 다운로드 받은 파일을 실행해 설치해주면 된다

RStudio 편집기

RStudio: R을 편리하게 이용할 수 있게 해 주는 편집기

https://www.rstudio.com

포스팅 주소가 posit.co로 바뀐 것 같음

Posit | The Open-Source Data Science Company

The best data science is open source. Posit is committed to creating incredible open-source tools for individuals, teams, and enterprises.

posit.co

: 가장 하단부 ALL PRODUCTS로 찾는 게 가장 빠름

Open Source > RStudio > RStudio Desktop

: R은 이미 설치했으니 RStudio를 설치해준다

-> 실제로 사용할 때는 RStudio를 열어 프로그램을 사용한다

RStudio 실행화면

RStudio를 처음 열었을 때의 화면

: 기본 레이아웃 상태

File > New File > R Script

스크립트창을 실행해 사용하는 것이 편하다

: R Script 창이 활성화 된 화면

R 기초 활용법

1. 작업 디렉토리 지정

: 데이터 파일을 읽어들이거나 내보낼 때, 일일이 위치를 지정하지 않아도 되는 디폴트 위치를 설정하는 것

setwd() 함수 안에 큰따옴표를 씌운 경로를 넣는다

setwd("C:\\Study\\R\\Practice")
or
setwd("C:/Study/R/Practice")

-> 작업 디렉토리는 RStudio를 종료하면 해제된다

-> 다음에 다시 작업파일을 열어 작업하거나 새로운 작업을 하는 경우

-> 디렉토리 명령어를 다시 써 주어야 한다

2. R Studio에서 명령어를 실행하는 법

1) 콘솔창 이용

: 콘솔창의 꺽쇠(>) 부분에 명령어를 입력한다

: 콘솔창에 직접 입력 후 Enter

2) 스크립트 창 이용

: 스크립트창에 스크립트를 저장하면서 콘솔에 실행할 수 있다

- 1줄만 실행할 경우: 실행하려는 명령어에 커서를 놓은 후 Run 버튼을 클릭하거나 단축키 Ctrl+Enter 누름

- 여러줄 또는 1줄 전체가 아닌 일부분만 실행할 경우: 실행하려는 명령어를 마우스로 선택한 후 Run 버튼을 클릭하거나 단축키 Ctrl+Enter 누름

React 리액트 - useContext()

Ayel — Mon, 29 Dec 2025 21:57:11 +0900

context

리액트의 컨텍스트(Context)

- Context: 컨테이너 내에서 컨텍스트로 둘러싸인 컴포넌트 사용가능한 전역변수라고 이해할 수 있다
- Provider(공급자) -> Consumer(수요자)

Context API란?

- Props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 처리할 수 있도록 제공해주는 API
- 리액의 내장 API(16버전 이상) 중 하나
-> 내장되어 있기 때문에 별도로 설치하지 않아도 사용 가능

Props의 드릴링

- 드릴링: 부모 컴포넌트부터 최하위 컴포넌트까지 Props를 보내는 과정
-> A.jsx ~ Z.jsx까지 있다고 가정할 때 부모 A컴포넌트부터 최하위 Z컴포넌트까지 Props를 보내는 과정

Context API의 사용

- 변화가 없는 것. 즉 다크모드 화이트모드 등 값이 선언되어 있는 상태로 변화가 없는 상태의 변수를 지정할 때 사용
- Context는 변화를 시켜주는 API가 아니다
- 변화를 주면 안되지만 혹시나 변화를 생길것을 대비하여 만들어져 있다

Context의 단점

- Provider 컴포넌트는 value Props를 받아서 하위 컴포넌트에게 전달한다
- value가 업데이트 되었을 때 Context로 감싸진 모든 컴포넌트가 리랜더링 된다

context 기본 구조

드릴링 상태의 컴포넌트 구조를 해소하기 위해

context를 사용

<CharContainer.jsx>

import React from 'react';
import A from './A';
import CharContext from './CharContext';

const CharContainer = () => {
  return (
    <CharContext.Provider value={{color: "red", fontSize: "50px"}}>
      <A />
    </CharContext.Provider>
  );
};

export default CharContainer;<A />

<A.jsx>

import React from 'react';
import B from './B';

const A = () => {
  return (
    <div>
      <B />
    </div>
  );
};

export default A;

<B.jsx>

import React from 'react';
import C from './C';
import CharContext from './CharContext';

const B = () => {
  return (
    <div>
      <CharContext.Consumer>
        {
          ({fontSize}) => {
            <h1 style={{fontSize}}>
              B: Context 활용해보기
            </h1>
          }
        }
      </CharContext.Consumer>
      <C />
      <button>B: 버튼을 누르면 글자 크기 변경</button>
    </div>
  );
};

export default B;

<C.jsx>

import React from 'react';
import CharContext from './CharContext';

const C = () => {
  return (
    <div>
      <CharContext.Consumer>
        {(context) => {
          console.log("context", context)
          return <p style={{color: context.color}}>C: REACT context API</p>
        }}

      </CharContext.Consumer>
    </div>
  );
};

export default C;

- context를 사용해 컨테이너의 스타일을 불러옴

-> A>B>C 순서대로 드릴링하지 않고 상위의 컨테이너를 불러올 수 있음

<결과화면>

useContext()

이전의 구조에서는 useState()사용이 어려움

-> 컨텍스트를 이용해 상태를 바꾸는 방법

버튼을 누르면 글자 크기 변경

<FontContext.js>

import { createContext, useState } from "react";

const FontContext = createContext({
  state: { fontSize: ""},
  actions: { setFontSize: () => {}}
})

export const FontProvider = ({children}) => {

  const [fontSize, setFontSize] = useState("2rem")

  const value = {
    state: { fontSize: fontSize },
    actions: { setFontSize: setFontSize }
  }

  return (
    <FontContext.Provider value={value}>
      {children}
    </FontContext.Provider>
  )

}

export default FontContext;

<FontContainer.jsx>

import React from 'react';
import FontParent from './FontParent';
import { FontProvider } from './FontContext';

const FontContainer = () => {
  return (
    <div>
      <FontProvider>
        <FontParent />
      </FontProvider>
    </div>
  );
};

export default FontContainer;

- Provider로 하위 컴포넌트를 감싸 불러옴

-> FontProvider 안에 있는 모든 컴포넌트는 value에 담긴 데이터를 직접 꺼내서 쓸 수 있다

<FontParent.jsx>

import React from 'react';
import FontChild from './FontChild';

const FontParent = () => {
  return (
    <div>
      <FontChild />
    </div>
  );
};

export default FontParent;

- 드릴링 발생

<FontChild.jsx>

import React, { useContext } from 'react';
import FontContext from './FontContext';

const FontChild = () => {

  // useContext 
  const {state, actions} = useContext(FontContext)
  const {fontSize} = state

  return (
    <div>
      <h1 style={{fontSize}}>useContext() 활용</h1>
      <button onClick={() => {
        actions.setFontSize("100px")
      }}>글자 크기 바꾸기</button>
    </div>
  );
};

export default FontChild;

- useContext() 사용이 가능해짐

-> useContext()로 useState()의 value값을 공유받아 사용한다

=> FontProvider 안에 있는 모든 컴포넌트는 value에 담긴 데이터를 직접 꺼내서 쓸 수 있으므로

=> FontChild는 props 없이도 fontSize에 접근 가능

<결과화면>

- 버튼을 누르면 글자가 커지게 된다

<기능추가>
사용자가 글자크기를 입력하고 엔터를 누르면 글자크기 변경

글자크기 입력 예시: 200px

<FontParent.jsx>

import React, { useContext } from 'react';
import FontChild from './FontChild';
import FontContext from './FontContext';

const FontParent = () => {

  const {state, actions} = useContext(FontContext)
  const {fontSize} = state
  const {setFontSize} = actions

  const handleFontSizeOnKeyDown = (e) => {
    if(e.key === "Enter"){
      setFontSize(e.target.value)
    }
  }

  return (
    <div>
      <FontChild />
      <h2 style={{fontSize}}>
        context 글자 크기 적용
      </h2>
      <input type="text" onKeyDown={handleFontSizeOnKeyDown} />
    </div>
  );
};

export default FontParent;

- 이전의 방식과 마찬가지로 useContext()를 사용해

fontContext.js의 기능을 FontParent.jsx에서 바로 사용 가능

<결과화면>

AnimalsContainer

- 동물을 추가하고 삭제하는 메서드 구현

- Context에 저장된 동물 세 마리를 버튼으로 출력

- input에 동물을 입력 후 엔터를 누르면 동물 버튼이 추가된다

- 동물 버튼을 클릭하면 해당 버튼이 삭제된다

- 추가, 삭제는 context에서 제공하는 insert(), remove()를 사용해야 한다

import React from 'react';
import { AnimalsProvider } from './AnimalsContext';
import Animals from './Animals';

const AnimalsContainer = () => {
  return (
    <div>
      <AnimalsProvider>
        <Animals />
      </AnimalsProvider>
    </div>
  );
};

export default AnimalsContainer;

- AminalsContainer는 변동없음

- 하위 컴포넌트에서 동작 및 기능 구현

<Animal.jsx>

import React, { useContext } from 'react';
import { AnimalsContext } from './AnimalsContext';

const Animals = () => {
  const {state, actions} = useContext(AnimalsContext)
  const {insert, remove} = actions

  console.log(state)

  const buttons = state.animals.map((animal, i) => (
    <li key={i}>
      <button onClick={() => remove(i)}>{animal}</button>
    </li>
  ))

  const handleAddAnimalOnKeyDown = (e) => {
    if(e.key === 'Enter'){
      insert(e.target.value)
      e.target.value = ''
    }
  }

  return (
    <div>
      <input type="text" onKeyDown={handleAddAnimalOnKeyDown}/>
      <ul>
       {buttons}
      </ul>
    </div>
  );
};

export default Animals;

- UIUX에서 출력되는 부분 구현

<AnimalContext.js>

import { createContext, useState } from "react"

export const AnimalsContext = createContext({
  state: {animals: []},
  actions: {insert: () => {}, remove: () => {}}
})

export const AnimalsProvider = ({children}) => {
  const [animals, setAnimals] = useState(['누렁이', '점박이', '얼룩이'])

  const insert = (animal) => {
    setAnimals([...animals, animal])
  }
  const remove = (index) => {
    setAnimals(animals.filter((animals, i) => index !== i))
  }

  const value = {
    state: {animals: animals},
    actions: {insert: insert, remove: remove}
  }

  return (
    <AnimalsContext.Provider value={value}>
      {children}
    </AnimalsContext.Provider>
  )
}

- 동물을 추가하고 삭제하는 기능 구현

<결과화면>

동물 목록 추가

버튼을 눌러 동물 삭제

React 리액트 - 컴포넌트(component)

Ayel — Sun, 28 Dec 2025 21:24:08 +0900

component

<BasicButton.jsx>

import React from 'react';
import Button from './style';

const BasicButton = ({size, shape, variant, border, font, color, children}) => {

  return (
    <Button size={size} shape={shape} variant={variant} border={border} font={font} color={color}>
      {children}
    </Button>
  );
};

export default BasicButton;

: size={""} shape={""} variant={""} border={""} font={""} color={""}
-> 사용하고자 하는 요소들의 key값을 비구조할당함

<style.js>

import styled, {css} from "styled-components";
import { flexCenter } from "../../styles/common";

const variantCSS = {
  primary : css`
    background-color: ${({theme}) => theme.PALETTE.primary["main"]};
  `,
  sub : css`
    background-color: ${({theme}) => theme.PALETTE.primary["sub"]};
  `,
  white : css`
    background-color: ${({theme}) => theme.PALETTE["white"]};
  `
};

const borderCSS = {
  primary : css`
    border: solid 1px ${({theme}) => theme.PALETTE.primary["main"]};
  `,
  sub : css`
    border: solid 1px ${({theme}) => theme.PALETTE.primary["sub"]};
  `,
  gray100 : css`
    border: solid 1px ${({theme}) => theme.PALETTE.gray["100"] };
  `,
  gray200 : css`
    border: solid 1px ${({theme}) => theme.PALETTE.gray["200"] };
  `,
  gray300 : css`
    border: solid 1px ${({theme}) => theme.PALETTE.gray["300"] };
  `
};

const colorCSS = {
  primary : css`
    color: ${({theme}) => theme.PALETTE.primary["main"]};
  `,
  sub : css`
    color: ${({theme}) => theme.PALETTE.primary["sub"]};
  `,
  white : css`
    color: ${({theme}) => theme.PALETTE["white"]};
    `,
  black : css`
    color: ${({theme}) => theme.PALETTE["black"]};
  `,
  gray100 : css`
    color: ${({theme}) => theme.PALETTE.gray["100"] };
  `,
  gray200 : css`
    color: ${({theme}) => theme.PALETTE.gray["200"] };
  `,
  gray300 : css`
    color: ${({theme}) => theme.PALETTE.gray["300"] };
  `
};

const shapeCSS = {
  default: css``,
  small : css`
    border-radius: 10px;
  `,
  large : css`
    border-radius: 20px;
  `,
  big : css`
    border-radius: 30px;
  `,
  round : css`
    border-radius: 50%;
  `,
}

const sizeCSS = {
  small : css`
    width: 64px;
    height: 32px;
    padding: 16px 0;
  `,
  medium : css`
    width: 96px;
    height: 48px;
    padding: 16px 0;
  `,
  large : css`
    width: 128px;
    height: 64px;
    padding: 16px 0;
  `,
  full : css`
    width: 100%;
    aspect-ratio: 8 / 1;
    padding: 16px 0;
  `,
}

const fontCSS = {
  h1 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h1"]};
    line-height: ${({theme}) => theme.FONT_LINE["h1"]};
  `,
  h2 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h2"]};
    line-height: ${({theme}) => theme.FONT_LINE["h2"]};
  `,
  h3 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h3"]};
    line-height: ${({theme}) => theme.FONT_LINE["h3"]};
  `,
  h4 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h4"]};
    line-height: ${({theme}) => theme.FONT_LINE["h4"]};
  `,
  h5 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h5"]};
    line-height: ${({theme}) => theme.FONT_LINE["h5"]};
  `,
  h6 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h6"]};
    line-height: ${({theme}) => theme.FONT_LINE["h6"]};
  `,
  h7 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h7"]};
    line-height: ${({theme}) => theme.FONT_LINE["h7"]};
  `,
  h8 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h8"]};
    line-height: ${({theme}) => theme.FONT_LINE["h8"]};
  `,
  h9 : css`
    font-size: ${({theme}) => theme.FONT_SIZE["h9"]};
    line-height: ${({theme}) => theme.FONT_LINE["h9"]};
  `,
}

const Button = styled.button`

  ${({variant}) => variantCSS[variant]};
  ${({shape}) => shapeCSS[shape]};
  ${({size}) => sizeCSS[size]};
  ${({border}) => borderCSS[border]};
  ${({color}) => colorCSS[color]};
  ${({font}) => fontCSS[font]};
  ${flexCenter};
`;

export default Button;

style.js 컴포넌트에서 필요한 항목을 가져와 정의

<theme.js>

const theme = {};
  theme.PALETTE = {
    primary: {
      main: "#ffd159",
      sub: "#fff4d8"
    },
    secondary: "#f1ebf5",
    white: "#fff",
    black: "#000",
    gray: {
      100: "#f1ebf5",
      200: "#aea8be",
      300: "#605866"
    },
    error: "#eb6144",
    background: {
      white: "#eee",
      gray: "#f1ebf5",
      black: "#333"
    }
  }

  theme.FONT_SIZE = {
    h1: "55px",
    h2: "40px",
    h3: "30px",
    h4: "21px",
    h5: "18px",
    h6: "16px",
    h7: "13px",
    h8: "11px",
    h9: "8px"
  }

  theme.FONT_WEIGHT = {
    thin: "100",
    regular: "400",
    bold: "800",
  }

  theme.FONT_LINE = {
    h1: "75px",
    h2: "55px",
    h3: "41px",
    h4: "29px",
    h5: "25px",
    h6: "22px",
    h7: "17px",
    h8: "12",
    h9: "8"
  }

export default theme;

<common.js>

import { css } from "styled-components"
// styled 내부에 있는 css를 가져와 사용

export const flexColumn = css`
  display: flex;
  flex-direction: column;
`

export const flexRow = css`
  display: flex;
  flex-direction: row;
`

export const flexCenterColumn = css`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`

export const flexCenterRow = css`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`

export const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`

// 공통적으로 사용하는 테마를 가져와 적용
export const h1Bold = css`
  font-size: ${({theme}) => theme.FONT_SIZE["h1"]};
  line-height: ${({theme}) => theme.FONT_LINE["h1"]};
  font-weight: ${({theme}) => theme.FONT_WEIGHT["bold"]};
`

export const h3Regular = css`
  font-size: ${({theme}) => theme.FONT_SIZE["h3"]};
  line-height: ${({theme}) => theme.FONT_LINE["h3"]};
  font-weight: ${({theme}) => theme.FONT_WEIGHT["regular"]};
`

<Styled06.jsx>

import React from 'react';
import BasicButton from '../../components/button/BasicButton';

const Styled06 = () => {
  return (
    <div>
      <h1> 컴포넌트</h1>
      <BasicButton 
        size={"medium"} shape={"small"} variant={"primary"} border={""} font={"h3"} color={"white"}
      >LOGIN
      </BasicButton>
      <BasicButton 
        size={""} shape={""} variant={"sub"} border={""} font={""} color={""}
      >LOGIN
      </BasicButton>
      <BasicButton 
        size={""} shape={""} variant={"white"} border={""} font={""} color={""}
      >LOGIN
      </BasicButton>
      <BasicButton 
        size={""} shape={""} variant={""} border={""} font={""} color={""}
      >LOGIN
      </BasicButton>
    </div>
  );
};

export default Styled06;

재사용을 위한 컴포넌트 구조로

페이지에서 각각의 요소값을 쉽게 변경할 수 있음

-> 중복되는 세팅을 하나로 사용 가능함

=> 초반 세팅이 오래 걸리지만 수정 및 재사용이 용이하다

<결과화면>

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일

리액트 기본 폴더 구조 [components][utils] - arrayheler.js - parseheler.js[consts] - key.js (상수, 문자열)[styles] // js의 장점 -> 동적 스타일 변경이 가능하다 -> 변수 제어 -> 속도가 엄청나게 빠름 - theme.js - global

developernew.tistory.com

React 리액트 - 리액트 style 아이콘 [Font Awesome]

Ayel — Sun, 28 Dec 2025 17:48:46 +0900

icon

<Font Awesome>
- 다양한 아이콘 무료 사용 가능
- 애니메이션 아이콘 생성 가능

https://fontawesome.com/

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

yarn add styled-components @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome styled-reset @fortawesome/fontawesome-svg-core react-router-dom

: 무료로 사용할 수 있는 아이콘 스타일 설치

- package.json에 설치됨
-> free-solid 및 free-regular 타입 아이콘 사용 가능

원하는 아이콘을 찾아 이미지 효과 등 부여 가능
-> 컬러, 애니메이션 등 적용 가능

아이콘 적용

REACT > Kit(Single)의 아이콘 이름만 복사해 사용

<Styled05.jsx>

import { faComment, faCommentDots } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import S from './style';

const Styled05 = () => {
  return (
    <div>
      <S.CommentIcon icon={faCommentDots} bounce />
    </div>
  );
};

export default Styled05;

<style.js>

import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const S = {}

  // 아이콘 스타일링
  S.CommentIcon = styled(FontAwesomeIcon)` 
    font-size: 100px;
    background-color: pink;
  `

export default S;

- 외부의 아이콘을 꾸미고 싶을 때 styled로 감싸 꾸며준다
-> styled(외부아이콘) 형태로 사용

-> 아이콘이지만 실제로는 폰트이기 때문에 폰트에 적용하는 이펙트 적용 가능
-> 사이즈, 컬러 등 변경

<결과화면>

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일

developernew.tistory.com

https://developernew.tistory.com/445

React 리액트 - 폰트 스타일 적용 방법

font : 상업적 이용 가능한 무료 한글 폰트 사이트 https://noonnu.cc 눈누상업적 이용 가능한 한글 폰트를 쉽게 찾아보세요.noonnu.cc 상업적으로 이용 가능한 유료 폰트를 포함해다양한 무료 폰트를 제

developernew.tistory.com

React 리액트 - 리액트 style 미디어 사이즈 적용 breakpoint.js

Ayel — Sun, 28 Dec 2025 16:48:16 +0900

breakpoint.js

- 미디어 사이즈를 정의하는 파일
- 모바일, pc, 태블릿 등 미디어별로 이펙트 부여 가능

<styles > breakpoint.js>

const size ={
  mobile: "480px",
  tablet: "768px",
  laptop: "1024px",
  desktop: "1280px"
}

export const media = {
  mobile: `(max-width: ${size.mobile})`,
  tablet: `(max-width: ${size.tablet})`,
  laptop: `(max-width: ${size.laptop})`,
  desktop: `(max-width: ${size.desktop})`
}

<style.js>

import styled from "styled-components";
import { fadeIn } from "../../keyframes/keyframes";
import { media } from "../../styles/breakpoint";

const S = {}

  S.Title = styled.p`
    ${h1Bold}
    opacity: 0;
    animation: ${fadeIn} 1s ease-in forwards;

    @media ${media.mobile} {
      font-size: 10px;
    }
  `

export default S;

styles.js에 미디어 코드를 추가해 적용

@media ${media.mobile} { }

- 미디어 쿼리 내 font-size: 10px; 등 세부적인 사항 추가 가능

<Styled04.jsx>

import React from 'react';
import S from './style';

const Styled04 = () => {
  return (
    <div>
      <S.Title>
        MY H1 FONT! APPLIED MY OWN GUIDE
      </S.Title>
      <S.SubTitle>
        H3 REGULAR - MY FONT STYLE SUBTITLE
      </S.SubTitle>
      <S.SnowBg
        width={"300px"}
        height={"300px"}
        alt="snowbg" 
      />
    </div>
  );
};

export default Styled04;

- 기존에 만들어 둔 코드의 스타일에 적용됨

<결과화면>

https://developernew.tistory.com/448

React 리액트 - 리액트 style 애니메이션 적용

keyframes.js - keyframes 폴더로 애니메이션 이펙트 관리- keyframes > keyframes.js 파일 내에서 이펙트 구현 import { keyframes } from "styled-components";export const fadeIn = keyframes` 0% { opacity: 0; transform: translate(0, -30px);

developernew.tistory.com

https://developernew.tistory.com/445

React 리액트 - 폰트 스타일 적용 방법

developernew.tistory.com

https://developernew.tistory.com/447

React 리액트 - 리액트 style 활용 방법 theme.js

theme.js - 테마 관련 정의 파일 - UI/UX 가이드에 정의된 값을 정의하는 파일 theme.js에서 전체 테마를 정의한 후 common.js에서 프로젝트에서 자주 쓰이는 공통 속성을 정의style.js에서 해당 폴더에 적용

developernew.tistory.com

https://developernew.tistory.com/446

React 리액트 - 리액트 style 활용 방법 global.js

styles > global.js global.js는 리액트의 글로벌 스타일 정의 파일-> 프로젝트 전체 속성을 한꺼번에 정의할 수 있다 ** common.js가 공통적으로 자주 사용하는 속성이라면global.js는 프로젝트 전체 속성 및

developernew.tistory.com

https://developernew.tistory.com/444

React 리액트 - 리액트 style 활용 방법 common.js

Style 컴포넌트 기본 구조 import React from 'react';import S from './style';const Styled01 = () => { return ( EMAIL PW SUBMIT );};export default Styled01; - 이메일, 패스워드 입력창을 꾸미기 위해 form과 div 사용-> 스타일 적용

developernew.tistory.com

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일

developernew.tistory.com

React 리액트 - 리액트 style 애니메이션 적용

Ayel — Sun, 28 Dec 2025 16:37:55 +0900

keyframes.js

- keyframes 폴더로 애니메이션 이펙트 관리
- keyframes > keyframes.js 파일 내에서 이펙트 구현

<keyframes.js>

import { keyframes } from "styled-components";

export const fadeIn = keyframes`
  0% {
    opacity: 0;
    transform: translate(0, -30px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
`

<style.js>

import styled from "styled-components";
import { flexCenter, flexCenterColumn, flexColumn, h1Bold, h3Regular } from "../../styles/common";
import { height, width } from "@fortawesome/free-solid-svg-icons/fa0";
import { fadeIn } from "../../keyframes/keyframes";
import { media } from "../../styles/breakpoint";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const S = {}

// SnowFlake
  // 이미지 스타일
  S.SnowImg = styled.img`
    width: ${(width) => width}; // props의 width를 width로만 사용 가능
    object-fit: cover;
    border-radius: 8px;
    padding: 20px;
  `;

  // 박스 스타일
  S.SnowImgWrapper = styled.div`
    border: 1px pink;
    ${flexCenterColumn}
  `

  S.SnowWrapper = styled.div`
    width: 800px;
    height: 800px;
    border: solid 1px purple;
    ${flexCenter}
  `;

  S.SnowBg = styled.div`
    width: ${({width}) => width};
    height: ${(height) => height};
    background-image: url("/assets/images/styled/04.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    animation: ${fadeIn} 1s ease-in forwards;
  `

  // Styled04
  S.Title = styled.p`
    ${h1Bold}
    opacity: 0;
    animation: ${fadeIn} 1s ease-in forwards;
    }
  `

  S.SubTitle = styled.p`
    ${h3Regular}
  `

export default S;

- 기존의 style.js폴더에 정의된 컴포넌트에 애니메이션 추가
- animation: ${fadeIn} 1s ease-in forwards;으로 글씨 및 이미지에 적용 가능

<결과화면>

https://developernew.tistory.com/447

React 리액트 - 리액트 style 활용 방법 theme.js

developernew.tistory.com

https://developernew.tistory.com/446

React 리액트 - 리액트 style 활용 방법 global.js

developernew.tistory.com

https://developernew.tistory.com/444

React 리액트 - 리액트 style 활용 방법 common.js

developernew.tistory.com

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일

developernew.tistory.com

https://developernew.tistory.com/445

React 리액트 - 폰트 스타일 적용 방법

developernew.tistory.com

React 리액트 - 리액트 style 활용 방법 theme.js

Ayel — Sun, 28 Dec 2025 16:12:17 +0900

theme.js

- 테마 관련 정의 파일
- UI/UX 가이드에 정의된 값을 정의하는 파일

theme.js에서 전체 테마를 정의한 후

common.js에서 프로젝트에서 자주 쓰이는 공통 속성을 정의

style.js에서 해당 폴더에 적용하는 스타일을 변경 가능하도록 정의해 사용

<styles > theme.js>

const theme = {};
  theme.PALETTE = {
    primary: {
      main: "#ffd159",
      sub: "#fff4d8"
    },
    secondary: "#f1ebf5",
    white: "#fff",
    gray: {
      100: "#f1ebf5",
      200: "#aea8be",
      300: "#605866"
    },
    error: "#eb6144",
    background: {
      white: "#eee",
      gray: "#f1ebf5",
      black: "#333"
    }
  }

  theme.FONT_SIZE = {
    h1: "55px",
    h2: "40px",
    h3: "30px",
    h4: "21px",
    h5: "18px",
    h6: "16px",
    h7: "13px",
    h8: "11px",
    h9: "8px"
  }

  theme.FONT_WEIGHT = {
    thin: "100",
    regular: "400",
    bold: "800",
  }

  theme.FONT_LINE = {
    h1: "75px",
    h2: "55px",
    h3: "41px",
    h4: "29px",
    h5: "25px",
    h6: "22px",
    h7: "17px",
  }

export default theme;

- 가장 기본적으로 많이 쓰이는 스타일 템플릿

- 사용하고자 하는 전체 템플릿을 미리 정의해두고 사용

<App.js>

import React from 'react';
import './App.css';
import GlobalStyle from './styles/global';
import { ThemeProvider } from 'styled-components';
import theme from './styles/theme';
import Styled04 from './pages/styled/Styled04';

function App() {
  return (
    <>
      <ThemeProvider theme={theme}> 삭제금지: 프로젝트 전체 테마 적용
        <GlobalStyle /> 삭제금지: 프로젝트 전체 스타일 적용
        <Styled04 />
      </ThemeProvider>
    </>
  );
}

export default App;

- 메인 파일의 컴포넌트 위에 테마 적용

테마 활용

<styles > common.js>

import { css } from "styled-components"

export const h1Bold = css`
  font-size: ${({theme}) => theme.FONT_SIZE["h1"]};
  line-height: ${({theme}) => theme.FONT_LINE["h1"]};
  font-weight: ${({theme}) => theme.FONT_WEIGHT["bold"]};
`

export const h3Regular = css`
  font-size: ${({theme}) => theme.FONT_SIZE["h3"]};
  line-height: ${({theme}) => theme.FONT_LINE["h3"]};
  font-weight: ${({theme}) => theme.FONT_WEIGHT["regular"]};
`

적용한 테마 파일의 수정을 용의하게 하기 위해

styles > common.js에 정의해준다

-> 필요 시 값을 변경해 특정 프로젝트에서 바로 수정 적용 가능

연습문제

<Styled04.jsx>

import React from 'react';
import S from './style';

const Styled04 = () => {
  return (
    <div>
      <S.Title>
        MY H1 FONT! APPLIED MY OWN GUIDE
      </S.Title>
      <S.SubTitle>
        H3 REGULAR - MY FONT STYLE SUBTITLE
      </S.SubTitle>
    </div>
  );
};

export default Styled04;

<styled > style.js>

import styled from "styled-components";

const S = {}

  // Styled04
  S.Title = styled.p`
    ${h1Bold}
  `

  S.SubTitle = styled.p`
    ${h3Regular}
  `

export default S;

styles > common.js에 정의한 내용을 활용하기 위해

작업 중인 폴더의 style.js 파일에서 불러와 사용

-> 필요 시 값을 변경해 특정 페이지에서 바로 수정 적용 가능

<결과화면>

https://developernew.tistory.com/446

React 리액트 - 리액트 style 활용 방법 global.js

developernew.tistory.com

https://developernew.tistory.com/444

React 리액트 - 리액트 style 활용 방법 common.js

developernew.tistory.com

https://developernew.tistory.com/443

React 리액트 - 폴더 구조, 리액트의 스타일

developernew.tistory.com

https://developernew.tistory.com/445

React 리액트 - 폰트 스타일 적용 방법

developernew.tistory.com